如何在 App 组件上安排我的路线

Question

我有各种路线，我也有一些来自上下文 api 的数据，我想传递给某些路线，但不包括一些路线。 所以，

1. <UserContext.Provider>应该包含在所有路由中。
2. 还有<Route element={<PrivateRoute />}>应该被包裹在大多数路由中，因为它应该检查经过身份验证的用户。
3. 然后是像<FruitsData>和<WeatherData>这样的组件，我应该只用来包装<Route path="training" element={<Training />} /> ，它在<Route element={<PrivateRoute />}>里面<Route element={<PrivateRoute />}>和<UserContext.Provider>

所以，我的问题。 我如何才能以正确的方式包装 3 中提到的组件，而不必像我在下面所做的那样将其包装在所有其他组件周围？

<UserContext.Provider value={user}>
      <WeatherData>
        <FruitsData>
        <Routes>
          <Route element={<PrivateRoute />}>
            <Route path="/" element={<Dashboard />} />
            <Route path="/test" element={<TestPage />} />
            <Route path="training" element={<Training />} />
            <Route path="fruit-details/:fruitId" element={<FruitDetails />} />
            <Route path="my-farm" element={<MyFarmList />} />
            <Route path="add-farm" element={<AddFarm />} />
            <Route path="farm-details" element={<FarmDetails />} />
            <Route path="add-post" element={<AddPost />} />
            <Route path="post-details/:postId" element={<PostDetails />} />
            <Route path="infestation-details/:infestationId" element={<InfestationDetails />} />
            <Route path="farm-details/:username/:farmId" element={<FarmDetails />} />
            <Route path="farm-details/:username/:farmId/fruits" element={<FarmFruits />} />
            <Route path="area" element={<Area />} />
            <Route path="shop" element={<Shop />} />
            <Route path="packages" element={<Packages />} />
            <Route path="seedlings" element={<Seedlings />} />
            <Route path="profile" element={<Profile />} />
            <Route path="product-details/:seedlingId" element={<ProductDetails />} />
            <Route path="pricing" element={<Pricing />} />
            <Route path="community" element={<Community />} />
            <Route path="complete-profile" element={<CompleteProfile />} />
          </Route>

          <Route path="admin/" element={<AdminPrivateRoute />}>
            <Route path="home" element={<Home />} />
            <Route path="farmers" element={<Farmers />} />
            <Route path="farms" element={<Farms />} />
          </Route>
        </Routes>
        </FruitsData>
      </WeatherData>
    </UserContext.Provider>

谢谢

Answer 1

我没有看到所有上下文提供程序包装整个路由的方式有任何明显的问题，但是如果您试图限制任何特定提供程序的 scope 那么这里的解决方案是让它们呈现一个Outlet组件而不是children支持并将它们渲染为布局路线。

例子：

const UserLayout = () => {
  ... logic/state/etc ...

  return (
    <UserContext.Provider value={user}>
      <Outlet />
    </UserContext.Provider>
  );
};

const FruitesWeatherLayout = () => {
  ... logic/state/etc ...

  return (
    <WeatherData>
      <FruitsData>
        <Outlet />
      </FruitsData>
    </WeatherData>
  );
};

...

<Routes>
  <Route element={<UserLayout />}> // <-- layout route
    <Route element={<PrivateRoute />}>
      <Route path="/" element={<Dashboard />} />
      <Route path="/test" element={<TestPage />} />

      <Route element={<FruitesWeatherLayout />}> // <-- layout route
        <Route path="training" element={<Training />} />
      </Route>

      <Route path="fruit-details/:fruitId" element={<FruitDetails />} />
      <Route path="my-farm" element={<MyFarmList />} />
      <Route path="add-farm" element={<AddFarm />} />
      <Route path="farm-details" element={<FarmDetails />} />
      <Route path="add-post" element={<AddPost />} />
      <Route path="post-details/:postId" element={<PostDetails />} />
      <Route path="infestation-details/:infestationId" element={<InfestationDetails />} />
      <Route path="farm-details/:username/:farmId" element={<FarmDetails />} />
      <Route path="farm-details/:username/:farmId/fruits" element={<FarmFruits />} />
      <Route path="area" element={<Area />} />
      <Route path="shop" element={<Shop />} />
      <Route path="packages" element={<Packages />} />
      <Route path="seedlings" element={<Seedlings />} />
      <Route path="profile" element={<Profile />} />
      <Route path="product-details/:seedlingId" element={<ProductDetails />} />
      <Route path="pricing" element={<Pricing />} />
      <Route path="community" element={<Community />} />
      <Route path="complete-profile" element={<CompleteProfile />} />
    </Route>

    <Route path="admin/" element={<AdminPrivateRoute />}>
      <Route path="home" element={<Home />} />
      <Route path="farmers" element={<Farmers />} />
      <Route path="farms" element={<Farms />} />
    </Route>
  </Route>
</Routes>