T
TanStack•9mo ago
passive-yellow

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>
);
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?
4 Replies
like-gold
like-gold•9mo ago
can you give more details please? what do you mean by "which will then generate its own nested routes" ?
passive-yellow
passive-yellowOP•9mo ago
@Manuel Schiller Absolutely, thank you for trying to help! I have several independent applications that all utilize a "Multimedia" component, allowing users to upload, delete, and modify multimedia content. My objective is to create an npm package for this component, enabling me to integrate it into any page of my applications. So far, everything is straightforward. However, the challenge lies in supporting the component's routes. For example, if the "Multimedia" component is added to the "settings" route, it should support: https://localhost:4200/settings/multimedia/mm/root https://localhost:4200/settings/multimedia/mm If it's added to the dashboard, it should support: https://localhost:4200/multimedia/mm/root https://localhost:4200/multimedia/mm
like-gold
like-gold•9mo ago
i don't think thats possible right now we had a similar question before, unfortunately i dont find it right now the only idea i had was to leverage virtual file routes
passive-yellow
passive-yellowOP•9mo ago
I see, thanks a lot!

Did you find this page helpful?