V5 to V6 How to replace <Route /> path array

[bottd]

I am doing an upgrade from v5.1 to v6 of React router on an application that uses multiple paths for some routes. This is supported in v5 but not v6. What would be the best way to update this code? I would like to avoid creating a handful of near identical route components. Here is an example of the code I am referring to:

<Route
    path={[
        "/a-route"
        "/another-route"
     ]}
     element={<Component />
 />

Type string[] is not assignable to type string

Just looking for the correct way to clean this up in v6!

[OlaoluwaM]

Something like this perhaps?
{ ['/a-route', '/another-route'].map((pathString) => <Route path={pathString} element={<Component />} />) }

[OlaoluwaM]

Since it's the same component being rendered

[valentinbourqui]

It works but are you able to explain in more details why/how there is no unmout/mount when you are passing multiple times the same component for different routes. Where is the trick ? Here with just a simple example component is always mount then unmount : https://jsfiddle.net/p0d8v5zf/26/

EDIT : Ok this is because Routes return the same element/structure (with _renderMatches) for React so there is no unmout/mount.

Just on thing that you must be careful with this solution is that using navigation("..") inside one of your component Route will unmount then mount again even if the component is the same.

[bottd]

Yeah this will definitely work. Such a simple solution I don't know how I didn't think of it. Thanks a lot!

[mrlubos]

Don't worry, I came here with the same question :P