React路由优化：如何为指定路由单独包裹特定组件？

问题 #

项目中配置了多路由并使用Context API传递数据，需求如下：

• 所有路由需被<UserContext.Provider>包裹；
• 多数路由需通过<Route element={<PrivateRoute />}>包裹以校验用户认证状态；
• 仅为<PrivateRoute>下的<Route path="training" element={<Training />}>路由，包裹<FruitsData>和<WeatherData>组件。

但目前<FruitsData>和<WeatherData>包裹了所有路由，请问如何正确实现仅为指定路由包裹这两个组件的需求？

当前路由代码：

<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>

解决方案 #

核心思路是仅在training路由的element属性中，用<FruitsData>和<WeatherData>包裹<Training>组件，同时移除原本包裹整个路由的这两个组件。

修改后的完整代码如下：

<UserContext.Provider value={user}>
  <Routes>
    <Route element={<PrivateRoute />}>
      <Route path="/" element={<Dashboard />} />
      <Route path="/test" element={<TestPage />} />
      {/* 仅为Training路由包裹FruitsData和WeatherData */}
      <Route 
        path="training" 
        element={
          <WeatherData>
            <FruitsData>
              <Training />
            </FruitsData>
          </WeatherData>
        } 
      />
      <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>
</UserContext.Provider>

修改说明 #

1. 移除了原本包裹整个<Routes>的<WeatherData>和<FruitsData>组件，避免全局生效；
2. 针对training路由，直接在它的element属性中嵌套包裹<WeatherData>和<FruitsData>，确保只有该路由能获取这两个组件提供的数据；
3. 其他路由保持原有结构，依然满足被<UserContext.Provider>包裹、多数路由通过<PrivateRoute>校验的需求。

内容的提问来源于stack exchange，提问作者John Mark