React Router with optional path parameter

by

The edit you posted was valid for an older version of React-router (v0.13) and doesn’t work anymore.

React Router v1, v2 and v3

Since version 1.0.0 you define optional parameters with:

<Route path="to/page(/:pathParam)" component={MyPage} />

and for multiple optional parameters:

<Route path="to/page(/:pathParam1)(/:pathParam2)" component={MyPage} />

You use parenthesis ( ) to wrap the optional parts of route, including the leading slash (/). Check out the Route Matching Guide page of the official documentation.

Note: The :paramName parameter matches a URL segment up to the next /, ?, or #. For more about paths and params specifically, read more here.

React Router v4 and above

React Router v4 is fundamentally different than v1-v3, and optional path parameters aren’t explicitly defined in the official documentation either.

Instead, you are instructed to define a path parameter that path-to-regexp understands. This allows for much greater flexibility in defining your paths, such as repeating patterns, wildcards, etc. So to define a parameter as optional you add a trailing question-mark (?).

As such, to define an optional parameter, you do:

<Route path="/to/page/:pathParam?" component={MyPage} />

and for multiple optional parameters:

<Route path="/to/page/:pathParam1?/:pathParam2?" component={MyPage} />

Note: React Router v4 is incompatible with react-router-relay (read more here). Use version v3 or earlier (v2 recommended) instead.

More Related Contents:

  1. Programmatically Navigate using react-router
  2. Passing custom props to router component in react-router v4
  3. Nested routes with react router v4 / v5
  4. How to implement authenticated routes in React Router 4?
  5. React doesn’t reload component data on route param change or query change
  6. onEnter not called in React-Router
  7. Detect change in query param react-router-dom v4.x and re-render component
  8. React-router URLs don’t work when refreshing or writing manually
  9. Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object
  10. Pass props in Link react-router
  11. How to use Redirect in version 5 of react-router-dom of Reactjs
  12. react-router scroll to top on every transition
  13. Use anchors with react-router
  14. Intercept/handle browser’s back button in React-router?
  15. How to make a shared state between two react components?
  16. React Routing works in local machine but not Heroku
  17. Multiple path names for a same component in React Router
  18. react-router getting this.props.location in child components
  19. Get path params in react-router v4
  20. Uncaught TypeError: Cannot read property ‘push’ of undefined (React-Router-Dom)
  21. Client Routing (using react-router) and Server-Side Routing
  22. Multiple Nested Routes in react-router-dom v4
  23. How to sync Redux state and url hash tag params
  24. react-router go back a page how do you configure history?
  25. How to manually invoke Link in React-router?
  26. react-router (v4) how to go back?
  27. Material-ui adding Link component from react-router
  28. How to use normal anchor links with react-router
  29. React router global header
  30. How can I redirect in React Router v6?

Leave a Comment