[FIXED] How can I arrange my Routes on the App component

Issue

I have various routes and I also have some data from context api that I want to pass to certain routes, excluding some. So,

1. There is the <UserContext.Provider> that should be wrapped inside all the routes.
2. There is also the <Route element={<PrivateRoute />}> that sould be wrapped inside most of the routes because it should be checking the authenticated user.
3. And then there are components like <FruitsData> and <WeatherData> that I should only use to wrap <Route path="training" element={<Training />} /> which is inside <Route element={<PrivateRoute />}> and <UserContext.Provider>

So, my question. How can I wrap the component mentioned in no.3 the right way without having to wrap it around all the other components like I have done below?

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

Thank you

Solution

I don't see any overt issue with the way all the context providers wrap the entirety of the routes, but if you are trying to limit the scope of any specific provider then the solution here is to have them render an Outlet component instead of the children prop and render them as layout routes.

Example:

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>

Answered By - Drew Reese
Answer Checked By - - Pedro (ReactFix Volunteer)