Duplicating route structures under a different path

[renevds]

(remix 2.8.1 using Vite)

Problem example

For remix project I have a modal that works with on several routes. Below a simplified structure. Let's say we have one page with the modal, pageA.

...
pageA.modal.stepA
pageA.modal.stepB
pageA.modal.stepC
...

This works great however I need to be able to open this from a second page under a different url, under a different layout. I can not navigate to the other page as I need the state when the modal is closed. Currently the best fix I found was copying the routes.

...
pageA.modal.stepA
pageA.modal.stepB
pageA.modal.stepC
...
pageB.modal.stepA
pageB.modal.stepB
pageB.modal.stepC
...

And then the route.tsx for page for pageB.modal.stepA` might look like this:

export {
  default,
  loader,
  action,
} from '~/routes/pageA.modal.stepA'

This is how my project works for now.
A small problem with this is that I can not use export * from to re-export the named exports. If I try this, the loader runs but useLoaderData is null, this might be a bug.
But my actual problem is that I now have to copy a lot of routes, (I now need it it for a third page).
I could move the logic to some component files but that keeps me with the same problem and that's the fact that I now have lots of extra route files/folders.
I don't want to opt out of the router as I do enjoy the way it works, but perhaps I can somehow add a single exception that pageB.modal is rerouted to pageA.modal?
The perfect ,but probably not feasible, solution would be support for some or-operator in route names, something like pageA|pageB.modal.stepA.

Does anyone have an idea on how to handle this?

[kiliman]

The nice thing about Remix is that you control your route configuration. By default, Remix provides a file-based convention "out of the box." However, you can replace or augment existing routes.

You do this via the routes property in vite.config.ts

https://remix.run/docs/en/main/file-conventions/vite-config#routes

Here, I'm bypassing defineRoutes and returning the route config object directly.

export default defineConfig({
  plugins: [
    remix({
      routes: () => {
        const commonPage = "pageA";
        const newPages = ["pageB", "pageC"];
        const steps = ["stepA", "stepB", "stepC"];
        const routes: Record<string, ConfigRoute> = {};
        newPages.forEach((newPage) => {
          steps.forEach((step) => {
            const routeId = `${newPage}.modal.${step}`;
            routes[routeId] = {
              id: routeId,
              parentId: "root",
              path: `${newPage}/modal/${step}`,
              file: `routes/${commonPage}.modal.${step}.tsx`, // use the same file for all new pages
            };
          });
        });
        // new "virtual" routes will be merged with existing routes
        return routes;
      },
    }),
    tsconfigPaths(),
  ],
});

You can verify your new routes using npx remix routes. You see the new routes all use the same file as pageA.

<Routes>
  <Route file="root.tsx">
    <Route path="pageA/modal/stepA" file="routes/pageA.modal.stepA.tsx" />
    <Route path="pageA/modal/stepB" file="routes/pageA.modal.stepB.tsx" />
    <Route path="pageA/modal/stepC" file="routes/pageA.modal.stepC.tsx" />
    <Route index file="routes/_index.tsx" />
    <Route path="pageB/modal/stepA" file="routes/pageA.modal.stepA.tsx" />
    <Route path="pageB/modal/stepB" file="routes/pageA.modal.stepB.tsx" />
    <Route path="pageB/modal/stepC" file="routes/pageA.modal.stepC.tsx" />
    <Route path="pageC/modal/stepA" file="routes/pageA.modal.stepA.tsx" />
    <Route path="pageC/modal/stepB" file="routes/pageA.modal.stepB.tsx" />
    <Route path="pageC/modal/stepC" file="routes/pageA.modal.stepC.tsx" />
  </Route>
</Routes>

NOTE: I didn't consider nested routes (setting parentId). I don't know exactly how your routes are structured, so I didn't want to make assumptions.

[renevds]

Thank you for the extensive answer @kiliman. This comes quite close to what I was looking for. However I may have simplified my example a bit too much. The actual structure is way larger and the modal has many nested routes. I was wondering, is it somehow possible to get the default generated routes and apply logic too them? This way I could loop all routes and duplicate all instances of pageA/modal/... to pageB/modal/... and pageC/modal/.... Also I was wondering, in your current solution, will remix still know that the steps share the modal layout and still only partially update if we change steps (assuming we change steps within the same page)?

Again, thank you for taking the time to respond.

[kiliman]

Sure, you can programmatically generate whatever routing structure you want as long as you output the correct format. That's essentially what Remix does when it scans your routes folder.

There are many community packages that support different conventions. I have remix-flat-routes (which is still file-based), but here's one where you define routes via JSON format or nested component <Routes> https://github.com/brophdawg11/remix-json-routes

The main issue is if you want different loaders depending on the route. That can be tricky as you still need a file with an exported loader.

[renevds]

Hey @kiliman, thank you for the quick response again. I may not have been very clear in my last response. I want to keep using the flat router. However if in the routing folder , I add all the necessary files for the modal under pageA, could I get the output of the flat routing, loop over it, and duplicate all routes for pageA to pageB, both pointing to the same tsx?

This way I can use the flat routing conventions to define the modal for one page, but have it duplicated to the other.

[renevds]

I ended up solving it using the following plugin in vite.config.ts:

Some config at the top of the file:

const routesToReplace = 'routes/pageA/modal'

const routesToReplaceWith = [
  'routes/pageB/modal',
  'routes/pageC/modal',
]

The remix plugin:

remix({
      ignoredRouteFiles: ['**/*'], // Make sure the default router is not used
      routes: async () => {
        // Call the default flat route generator
        const routes = flatRoutes('app', [], 'routes')

        // Duplicate the route to all the new routes
        for (const routeKey of Object.keys(routes)) {
          if (
            routeKey.startsWith(routesToReplace) &&
            routeKey !== routesToReplace
          ) {
            for (const routeKeyToReplace of routesToReplaceWith) {
              // Create a copy of the route
              const route = routes[routeKey]
              const newRouteKey = routeKey.replace(
                routesToReplace,
                routeKeyToReplace,
              )
              const newRoute: ConfigRoute = {
                file: route.file,
                id: route.id.replace(routesToReplace, routeKeyToReplace),
                path: route.path,
                parentId: route.parentId?.replace(
                  routesToReplace,
                  routeKeyToReplace,
                ),
              }
              if (route.index) {
                newRoute.index = true
              }

              // Add the new route to the routes object
              routes[newRouteKey] = newRoute
            }
          }
        }

        // Return the new routes object
        return routes
      },
    })