Multiple path names for a same component in React Router Multiple path names for a same component in React Router javascript javascript

Multiple path names for a same component in React Router


As of react-router v4.4.0-beta.4, and officially in v5.0.0, you can now specify an array of paths which resolve to a component e.g.

<Router>    <Route path={["/home", "/users", "/widgets"]} component={Home} /></Router>

Each path in the array is a regular expression string.

The documentation for this approach can be found here.


At least with react-router v4 the path can be a regular expression string, so you can do something like this:

<Router>    <Route path="/(home|users|widgets)/" component={Home} /></Router>

As you can see it's a bit verbose so if your component/route is simple like this it's probably not worth it.

And of course if this actually comes up often you could always create a wrapping component that takes in an array paths parameter, which does the regex or .map logic reusably.


I don't think it is if you use a version of React Router lower than v4.

You can use a map as you would do with any other JSX component though:

<Router>    {["/home", "/users", "/widgets"].map((path, index) =>         <Route path={path} component={Home} key={index} />    )}</Router>

EDIT

You can also use a regex for the path in react-router v4 as long as it's supported by path-to-regexp. See @Cameron's answer for more info.