Match multiple path with react router v4

Question

Given I have 2 path rendering the same component, how do I avoid to repeat route configs like this :

<Route path="/path1" component={MyComp} />
<Route path="/path2" component={MyComp} />

Does this answer your question? [Multiple path names for a same component in React Router](https://stackoverflow.com/questions/40541994/multiple-path-names-for-a-same-component-in-react-router) — Ben Smith, Jan 14 '22 at 01:02

score 22 · Answer 1 · answered Apr 21 '17 at 13:59

22

Best solution I found so far (but seems a bit strange) :

<Route path="/:path(path1|path2)" component={MyComp} />

answered Apr 21 '17 at 13:59

sylvain

score 12 · Answer 2 · answered Dec 11 '20 at 02:27

12

<Route path={["/common-one", "/common-two"]} component={Common} />

answered Dec 11 '20 at 02:27

1

this is working perfectly fine, this should be the accepted answer – iamdipanshus Feb 12 '22 at 09:20

score 8 · Answer 3 · answered May 04 '17 at 22:05

Great answer. This also helps in the following scenario:

<Route path="/path/path1" component={MyComp} />
<Route path="/path/:subpath(path2|path3)" component={MyAnotherComp} />

Without (path2|path3) both components MyComp and MyAnotherComp are mounted if the path is /path/path2.

PS. Would have added as a comment, but not eligible :).

score 1 · Answer 4 · answered Oct 15 '19 at 13:10

If you need to allow multiple match (different parameters) but also without parameter - e.g. match URLs:

You can do this with optional parameter (note question mark after the bracket)

<Route path="/questions/:tab(posted|answered)?" component={...} />

4 Answers4