Multiple path names for a same component in React Router

by

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.

Update for React Router v6

React Router v6 no longer allows an array of paths to be passed as a Route property. Instead you can make use of the useRoutes (see here for documentation) React hook to achieve the same behaviour:

import React from "react";
import {
  BrowserRouter as Router,
  useRoutes,
} from "react-router-dom";

const App = () => useRoutes([
    { path: "/home", element: <Home /> },
    { path: "/users", element: <Home /> },
    { path: "/widgets", element: <Home /> }
  ]);

const AppWrapper = () => (
    <Router>
      <App />
    </Router>
  );

You can see an extended example of this code working here.

The key take away from this answer is:

The useRoutes hook is the functional equivalent of <Routes>, but it
uses JavaScript objects instead of <Route> elements to define your
routes.

More Related Contents:

  1. Client Routing (using react-router) and Server-Side Routing
  2. How to render an array of objects in React?
  3. Passing custom props to router component in react-router v4
  4. Nested routes with react router v4 / v5
  5. react-router – pass props to handler component
  6. How to implement authenticated routes in React Router 4?
  7. react router v6 navigate outside of components
  8. React-Router: No Not Found Route?
  9. Problem in redirecting programmatically to a route in react router v6
  10. Intercept/handle browser’s back button in React-router?
  11. How to make a shared state between two react components?
  12. React Routing works in local machine but not Heroku
  13. React react-router-dom pass props to component
  14. Active link with React-Router?
  15. Using anchor tags in react-router 4
  16. How to hide navbar in login page in react router
  17. How do I reload a page with react-router?
  18. How is this type annotation working in React code without TypeScript?
  19. React-router: How to manually invoke Link?
  20. React-router – How to pass data between pages in React?
  21. React-router v4 – cannot GET *url*
  22. ReactJS: [Home] is not a component. All component children of must be a or
  23. Matched leaf route at location “/” does not have an element
  24. How to create a protected route with react-router-dom?
  25. Why I receive blank page? React
  26. Detect change in query param react-router-dom v4.x and re-render component
  27. How to restrict access to routes in react-router?
  28. React – How to open PDF file as a href target blank
  29. React: ‘Redirect’ is not exported from ‘react-router-dom’
  30. On React Router, how to stay logged in state even page refresh?

Leave a Comment