reactjs - ErrorBoundary 将当前内容替换为 fallbackRender 而不是将其添加到顶部

Question

我正在尝试在引发错误的页面/组件顶部显示带有错误消息的横幅。该错误是由 API 调用触发的，因此我同时使用了来自 react-error-boundary 的钩子和组件。

我可以捕获错误并显示横幅，但我不知道如何将其显示在页面顶部而不是替换整个内容。我认为这就是 fallbackRender 应该做的，但它仍然显示横幅，没有别的。

这是我当前设置的简化版本：

警报横幅.js

    const AlertBanner = ({ error }) => {
      return <Container >{error}</Container>;
    };

应用程序.js

  import { ErrorBoundary } from "react-error-boundary";
    const App = () => {
      return (
       <ErrorBoundary fallbackRender={AlertBanner}>
         <Login />
       </ErrorBoundary>
      )
    }

登录.js

 const Login = () => {
 const handleError = useErrorHandler();
 const login = () => {
loginService.login(credentials).then(setUser, handleError);
                  };
 return (
    <div className={classes.container}>
      <FullScreenImage />
      <form className={classes.login} onSubmit={handleSubmit}>
      // [...]
      </form>
    </div>
  );