Regarding broken in 6.20.0 of relative path resolution for splat route, how to migrate?

[chinfeng]

#11052

I use to modularize this way with splat route path:

// splat route of parent
<Route path="moduleOne/*" lazy={() => import('./moduleOne')} />

// moduleOne.jsx
<aside>
  <Link to="subpath/a">ToA</Link>
  <Link to="subpath/b">ToB</Link>
</aside>
<main>
  <Outlet />
</main>

After 6.20.0 broken of splat resolution, moduleOne/subpath/a becomes moduleOne/subpath/a/subpath/a/subpath/a/..... after navigated more than one time. All relative links under splat path had broken. And I relied on this buggy behavior for module reuse like this:

<Route path="moduleOne/*" lazy={() => import('./moduleOne')} />
<Route path="other/path/to/*" lazy={() => import('./moduleOne')} />

How can I migrate after buggy behavior fixed ?

[birdofpreyru]

Same here. I guess, the only way now is to pass the root route (/moduleOne) into ModuleOne component as a prop (or via Context API), and then use it to explicitly turn all relative links there into correct absolute ones.

[cyrilluce]

I have a tricky solution, work both under v7_relativeSplatPath or not, but will cause warings

Change

<Route path="moduleOne/*" lazy={() => import('./moduleOne')} />

to

<Route path="moduleOne" lazy={() => import('./moduleOne')}>
  <Route path="*" />
</Route>

[chinfeng]

It will break the loader functions.