v6.4: preferred way to use multiple paths for one component?

[j-waaang]

What is the preferred way since v6.4 to have multiple paths pointing to the same component.

My application has different urls depending on the language. I want to avoid having double the amount of routes.

With v6 I could do something like this:
`const App = () =>
useRoutes(['/german-url', '/english-url'].map(path => ({path, element})));

const AppWrapper = () => (



);`

How would I do this with createBrowserRouter?

[brophdawg11]

Your routes are just an array so you can spread + map into them:

let router = createBrowserRouter([
  ...['/german-url', '/english-url'].map(path => ({
    path,
    Component: MyRouteComponent
  })
]);

I want to avoid having double the amount of routes

I'm not sure I understand what you mean here? You still had double the number of routes in your useRoutes approach above since you defined a route per URL.

[Cristy94]

But this will re-create the MyRouteComponent if the path changes.

How can we memoize/re-use the exact same MyRouteComponent for both paths?

[brophdawg11]

I don't think so? https://codesandbox.io/p/sandbox/lsyxrp