[Feature]: Absolute paths in react router v6

[ryanryanorient]

What is the new or updated feature that you are suggesting?

I want to use absolute path navigation in nested routes but I can't find the relevant api

The original path is /a/b/c
I wish I could render /a/b/c from url /d

Why should this feature be included?

It is risky to expose the original url directly
All components can be easily guessed by a hacker

[JesusTheHun]

I agree with OP, but I think a bit of context is required here.

I put my routes in contants, so I can use generatePath() safely.
Since I don't want define all my routes in the same place, I let each component that host a <Routes> define it's sub routes.

// App.tsx
export const rootRoutes = {
  settings: `settings/*`
}; 
return <App>
  <Routes>
    ...
    <Route path={rootRoutes['settings']} element={<SettingsPage />} />
  </Routes>
</App>

/// SettingsPage.tsx
export const settingsRoutes = {...};
return <SettingsPage>
  <Routes>
    <Route path={settingsRoutes['user-settings']} element={<UserSettingsPage>} />
  </Routes>
<SettingsPage/>

The problem is that when I want to generate the path to a setting page, I want to use

generatePath(settingsRoutes['user-settings'])

But this path contains only the relative path. So I need to work things around :

export const settingsRoute = joinRoutes(rootRoutes['settings'], { ... });

Now I have another problem. Because react-router does not support absolute path in sub-routes, I have to find my way around, again :

/// SettingsPage.tsx
const subRoutes = { ... };
export const settingsRoutes = joinRoutes(rootRoutes['settings'], subRoutes);
return <SettingsPage>
  <Routes>
    <Route path={subRoutes['user-settings']} element={<UserSettingsPage>} />
  </Routes>
<SettingsPage/>

Click to see `joinRoutes` definition

export const joinRoutes = (rootRoute: string, routes: Record<string, string>): Record<string, string> => {
  const wildcardlessRootRoute = rootRoute.replace('/*', '');
  const joinedRoutes: Record<string, string> = {};

  Object.entries(routes).forEach(([key, value]) => {
    joinedRoutes[key] = wildcardlessRootRoute + '/' + value;
  })

  return joinedRoutes;
}

Clearly this is a flawed way to go, as this would not support several scenarios but it works for now.
I believe my issue is faced by many as I don't believe anyone uses plain text links in their code.

[timdorr]

This is already implemented. You prefix your path with / to go to an absolute route:

<Link to="something">Go to a nested route</Link>
<Link to="/anything">Go to an absolute route</Link>