如何创建一个在 React Router DOM 中的地址发生变化时不会发生变化的组件？

Question

我正在写一个导航器组件。 该组件使用useNavigate 。 但是useNavigate可以在react-router-dom中使用。 但是，我们知道不受路由器影响的独立组件必须在路由器外部创建。

我如何创建一个组件，当它的地址在react-router-dom中发生变化时它不会改变？

这是我的代码：

...
const router = createBrowserRouter(
  createRoutesFromElements(
    <>
      // Where can I add fixed components?
      <Route path="/" element={<Home />}></Route>
      <Route path="503" element={<ServiceUnavailable />}></Route>
      <Route path="*" element={<NotFoundPage />}></Route>
    </>
  )
);

return <RouterProvider router={router} />;

我也试过BrowserRouter ，但我得到了useEffect错误。

Answer 1

如果您想要一组路由的“固定”组件，请在Layout Route上渲染它们。 布局路由呈现“固定”内容和嵌套路由的Outlet以将其element呈现到其中。

例子：

import {
  createBrowserRouter,
  createRoutesFromElements,
  Route,
  Outlet,
} from 'react-router-dom';

const Layout = () => (
  <>
    {/* Render fixed components like Navbars in layout */}
    <Outlet />
  </>
);

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route element={<Layout />}>
      <Route path="/" element={<Home />} />
      <Route path="503" element={<ServiceUnavailable />} />
      <Route path="*" element={<NotFoundPage />} />
    </Route>
  )
);

return <RouterProvider router={router} />;