Migrating Nested Switches

[indeediansbrett]

How would one migrate nested switches incrementally? Have a case where one package needs to update, but higher up in the tree there is another package using that package that cannot upgrade yet. So for an example, something like below. How do I adjust the nested component with the compatibility layer for React v6 with the higher up component?

Higher up:

import { NestedRouteComponent } from 'nested-package';

<Switch>

<Route path="/the_path">
    <NestedRouteComponent />
</Route>

...
more Route's
...

</Switch>

NestedRouteComponent:

<Routes>
    <Route path="/the_path">
        <Route index element={*React components*} />
        <Route path="relative_path" element={*more React components*} />
    </Route>
</Routes>

NestedRouteComponent should be like:

<Routes>
    <Route index element={*React components*} />
    <Route path="relative_path" element={*more React components*} />
</Routes>

[indeediansbrett]

This is the best have come up with for the nested component, but don't like it. This is so it's compatible with both v5 Switches above and v6 Routes above:

const SubRoutes = () => (
  <Routes>
      <Route index element={*React components*} />
      <Route path="relative_path" element={*more React components*} />
  </Routes>
);

return (
  <Routes>
    <Route path="/the_path" element={<SubRoutes />} />
    <Route path="*" element={<SubRoutes />} />
  </Routes>
);