How to create descendant route dynamically under the data router provider?

Question

export const routes = createRoutesFromElements(
  <Route path="/" element={<Layout />}>
    <Route path="home element={<Home />} />
      <Route path="*" element={<AppLayout />}>
        <Route path="sample" element={<Sample />} />
      </Route>
    </Route>
  </Route>,
);

export const browserRouter = createBrowserRouter(routes);

and the router is used as

root.render(<RouterProvider router={browserRouter} />)

Finally, the problematic part, <Sample /> component where the error is thrown from is like this

const Sample = () => {
  return (
    <Route
      path=""
      element={
        <div>
          Sample
          <Outlet />
        </div>
      }
    >
      <Route path="2" element={<div>dsf</div>}></Route>
    </Route>
  );
};

Creating the first router using createRoutesFromElements works fine but in the <Sample /> component, the error A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>. is thrown.

I used to wrap with <Routes /> but since I want to leverage the full feature of data provider, I am migrating to not using the <Routes />.

If I can't define all the routes in one place, how can I set up the route dynamically as above?

score 0 · Answer 1 · answered Jun 29 '23 at 07:46

0

From what I understand, if you want to use the Data APIs on all routes, then they need to all be declared in the Data Router.

The Sample component should be converted to a layout route component and rendered in the router, and then the route Sample was trying to render would be rendered as a nested route.

Example:

const Sample = () => {
  return (
    <div>
      Sample
      <Outlet />
    </div>
  );
};

export const browserRouter = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<Layout />}>
      <Route path="home element={<Home />} />
        <Route element={<AppLayout />}>
          <Route path="sample" element={<Sample />}>
            <Route path="2" element={<div>dsf</div>} />
          </Route>
        </Route>
      </Route>
    </Route>,
  )
);

answered Jun 29 '23 at 07:46

Drew Reese

165,259
14
153
181

Thanks. Isn't there a way to declare a route in another module rather than one that declares browserRouter? Some routes should be created(or removed) depending on the value that is coming from the outside. (Role and permission would be a good example.) And sometimes, the value that affects routes could be changed in another component, not from the module where the browserRouter is declared. – JunKim Jun 29 '23 at 08:41
1

@JunKim No, I don't believe code-splitting routes will work with Data Routers as the Data Router needs to be aware of the routes it manages. It can't do this for descendent routes since those aren't necessarily known when the app mounts, or even during the life of the app instance if you are conditionally rendering them. My suggestion is to just render all routes you want to handle *unconditionally* and create [protected routes](/a/66289280/8690857) for the routes/content you need to guard access to. – Drew Reese Jun 29 '23 at 15:26

How to create descendant route dynamically under the data router provider?

1 Answers1