Dynamic Route Generation with TanStack Router for External Components

Question:
I aim to create a component that can be imported as a package and included in a route, which will then generate its own nested routes. For instance, when adding an editor component, it should automatically support the paths it comes with.

Here is my typical setup using React Router:

const MultimediaRoutes = () => (
  <>
    <Route path="multimedia" element={<TestComponent />} />
    <Route path="multimedia/mm/root" element={<TestComponent2 />} />
  </>
);

const routes = createRoutesFromElements(
  <Route element={<Layout />}>
    {MultimediaRoutes()}
  </Route>
);

const MultimediaRoutes = () => (
  <>
    <Route path="multimedia" element={<TestComponent />} />
    <Route path="multimedia/mm/root" element={<TestComponent2 />} />
  </>
);

const routes = createRoutesFromElements(
  <Route element={<Layout />}>
    {MultimediaRoutes()}
  </Route>
);

const MultimediaRoutes = () => (
  <>
    <Route path="multimedia" element={<TestComponent />} />
    <Route path="multimedia/mm/root" element={<TestComponent2 />} />
  </>
);

const routes = createRoutesFromElements(
  <Route element={<Layout />}>
    {MultimediaRoutes()}
  </Route>
);

const MultimediaRoutes = () => (
  <>
    <Route path="multimedia" element={<TestComponent />} />
    <Route path="multimedia/mm/root" element={<TestComponent2 />} />
  </>
);

const routes = createRoutesFromElements(
  <Route element={<Layout />}>
    {MultimediaRoutes()}
  </Route>
);

This setup allows me to add routes that support additional nested routes provided by the external component.

Does anyone have an idea how to achieve similar behavior using TanStack Router with the Filebased approach?

Dynamic Route Generation with TanStack Router for External Components

Similar Threads

Similar Threads

Similar Threads