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.