如果 Outlet 为空，如何在 Outlet 外的路由中不显示页面 NotFound404

问：

我想显示管理面板或页面登录和注册。我使用两个组件：第一个是带布局（LayoutPages），第二个是没有布局（LayoutEmpty）。 我的菜单和其他组件在 LayoutPages 中呈现，但页面登录和注册在 LayoutEmpty 中呈现。为此，我使用react-router。 一切都有效，但如果某些路由是活动组件，则在其他组件之后渲染。如果我将 errorElement 用于 Route，它不起作用。

import React from "react";
function LayoutPages(props) {
    return (
        <div className="LayoutPages">
            <div className="container">
                {props.children}
            </div>
        </div>
    )
}
export default LayoutPages;

import React from "react";
function LayoutEmpty(props) {
    return (
        <div className="LayoutEmpty">

            {props.children}
        </div>
    )
}
export default LayoutEmpty;

const EmptyLayout = () => (
  <>
    <Outlet />
  </>
)

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <LayoutPages>
          <Routes>
            <Route element={<AppLayout />} errorElement={<NotFound404 />} >
              <Route path="/" element={<Home />} />
              <Route path="/products" element={<Products />} />
              <Route path="/products/:id" element={<ProductItem />} />
              <Route path="/contacts" element={<Contacts />} />
              <Route path="/cabinet" element={<Cabinet />} />
              <Route path="/cars" element={<Cars />} />
              <Route path="/products/:productId/review/:reviewId" element={<Review />} />
              <Route path="/todo" element={<ToDo />} />
              <Route path="/forms" element={<Forms />} />
            </Route>
          </Routes>
        </LayoutPages>

        <LayoutEmpty>
          <Routes>
            <Route element={<EmptyLayout />}>
              <Route path="/log-in" element={<Login />} />
              <Route path="/sign-in" element={<Registration />} />
              <Route path="*" element={<NotFound404 />} />
            </Route>
          </Routes>
        </LayoutEmpty>
      </BrowserRouter>
    </div >
  );
}

那么，如何在没有钩子的情况下在我的代码中正确呈现页面 404？