我如何在 React router v6 中用上下文包装 2 个路由

Question

我如何在 React Router v6 的上下文中包装 2 个路由？只有这两个应该暴露在该上下文中，并且我无法单独设置上下文，因为上下文运行一些代码（useEffect），如果我这样做，它会在每次切换路由时触发，我希望它在加载两条路由之前而不是之后触发按下它们，而且在我加载 app.js 后，app.js 会加载，而上下文提供程序不会加载，那么当我这两个路由之一时，上下文会触发，而当我在它们之间切换时，它不会触发，这可能吗？谢谢

  return (
    <Layout>
      <Routes>
        <Route path="/*" element={<Navigate replace to='/login'/>} />
        <Route path="/pracels" element={<PracelsPage/>} />
        <Route path="/search" element={<SearchPracelPage/>} />
        <Route path="/login" element={<LoginPage/>} />
      </Routes>
    </Layout>
  );

我想用 1 个上下文提供程序包装 /pracels 和 /search

Answer 1

您react-router-dom@6可以创建所谓的布局路由来呈现上下文提供程序并向一组路由提供上下文值。这些通常是无路径的路由组件，为一组路由提供通用功能，每个路由都匹配并呈现到Outlet由布局呈现的组件中。

基本示例：

import { Outlet } from 'react-router-dom';

const MyContextLayout = () => {
  ...

  return (
    <MyContextProvider>
      <Outlet />
    </MyContextProvider>
  );
};

export default MyContextLayout;

...

import MyContextLayout from '../path/to/MyContextLayout';

...

return (
  <Layout>
    <Routes>
      <Route path="/*" element={<Navigate replace to='/login'/>} />
      <Route element={<MyContextLayout />}>
        <Route path="/pracels" element={<PracelsPage/>} />
        <Route path="/search" element={<SearchPracelPage/>} />
      </Route>
      <Route path="/login" element={<LoginPage/>} />
    </Routes>
  </Layout>
);

Answer 2

您可以将路由包装在一个上下文提供程序中。

假设您有一个名为的上下文，AuthProvider您可以像这样使用它：

return (
    <Layout>
     <AuthProvider>
        <Routes>
         <Route path="/pracels" element={<PracelsPage/>} />
         <Route path="/search" element={<SearchPracelPage/>} />
      </Routes>
      </AuthProvider>
      <Routes>
          <Route path="/*" element={<Navigate replace to='/login'/>} />
          <Route path="/login" element={<LoginPage/>} /> 
      <Routes/>      
    </Layout>
  );

现在只有 中的路由<AuthProvider>会使用您的上下文。