How to use React Router v6 nested Routes with absolute urls?

[gustaff-weldon]

We are migrating are big app from v5 to v6.

In our current setup, we have split our app into submodules and each module contains a special routes file that provides full urls to all pages within a module. The paths and urls are always absolute eg.

// accounts/routes

const accountsRoutes: AccountsRoutes = {
  accountsIndex: {
    path: '/app/accounts',
    getUrl: () => '/app/accounts'
  },
  accountsDetails: {
    path: `/app/accounts/:id`,
    getUrl: (accountId: string): string => {
      return `/app/accounts/${accountId}`;
    }
  },
  ....
};

We have plenty of such modules and respective route files. We use them both in <Link by generating url to a page from any place in the system by calling getUrl eg.routes.accounts.accountsDetails.getUrl(123) and in Route by providing the path eg. routes.accounts.accountsDetails.path

This worked great with any level of nesting in v5, and we have several levels of components which include <Switch> with Route that can easily use that path.

Now, when migrating to Routes and Route we have found that providing absolute paths to nested Route make them inaccessible, ie. they do not render.

Lets take the following scenario:
// Home

<Routes>
  <Route path="/app/settings/* element={<Settings />">
</Routes>

// Settings

<Routes>
  <Route path="/app/settings/accounts/*" element={<Accounts />} />
  <Route path="/app/settings/x" element={<SettingsX />} />
  <Route path="/app/settings/z element={<SettingsY />} />
</Routes>

// Accounts

<Routes>
  <Route index={true} element={<AccountsList />} />
  <Route path="/app/settings/accounts/:id/details" element={<AccountDetails />} />
</Routes>

We cannot make this to work with v6. It seems we would need to convert all the absolute urls in Route to paths relative to the closest parent.

Are absolute urls not supported in nested Route in v6?

[cairin]

I suspect that this is due to you having multiple <Routes>. From the docs:

<Routes> will match a set of child routes from the current location.

Remix will only ever has one of these, and configures its routes like this:

<Routes>
  <Route file="root.tsx"> // This is the remix root layout route.
    <Route path="app/settings" file="routes/app/settings.tsx" />
  </Route>
</Routes>

This makes me think you should probably do something similar by placing a single <Routes> component at the root of your app, and import your <Route> modules under that:

// react fragments
<>
  <Route path="/app/settings/accounts/*" element={<Accounts />} />
  <Route path="/app/settings/x" element={<SettingsX />} />
  <Route path="/app/settings/z element={<SettingsY />} />
</>

// Or Pathless routes the way remix does it:
<Route>
  <Route path="/app/settings/accounts/*" element={<Accounts />} />
  <Route path="/app/settings/x" element={<SettingsX />} />
  <Route path="/app/settings/z element={<SettingsY />} />
</Route>

[gustaff-weldon]

@cairin thanks for the answer. I do not believe docs mention that nested <Routes> are not supported, quite the contrary the migration guide step 4 says:

4. Convert Switch to Routes
   Once every descendant component in a has been migrated to v6, you can convert the <Switch> to <Routes> and change the <CompatRoute> elements to v6 <Route> elements.

Which suggests nesting of routes is fine.

Also, the very same migration guide marks the step as making top level routes optional

7. Optional: lift Routes up to single route config
   This part is optional (but you'll want it when the React Router data APIs ship).

Once you've converted all of your app to v6, you can lift every <Routes> to the top of the app and replace it with an <Outlet>. React Router v6 has a concept of "nested routes".

We do not want to move all routes to the top of our app, it is not practical and breaks modules encapsulation.

@ryanflorence can you shed some light on this matter? The docs are vague on this.

[jasikpark]

It may be helpful to update that part of the docs to mention that it's optional only if you don't want to use the "now shipped data apis"

[daniellykammers-tr]

I have the same problem, but @cairin proposal didn't solve it. Have you found the best way to migrate routes written this way to React Router V6?

[mihaibogdan]

@gustaff-weldon @daniellykammers-tr Did you find any solution for this? Or maybe a workaround?

[daniellykammers-tr]

I gave up on finding a solution and adapted the entire application to use the Browser Router standard.

[denisoby]

I have the nice solution to allow nested absolute URL with minimal code changes.
I'm polishing it now and will post it during the next week.

@mihaibogdan fyi

[manvydas-tbol]

@denisoby any updates?

[designlook]

Yes would love an update if you have possible solution