Sometimes you need an optional parameter in the URL, so React will render a component even if certain part of the URL is ‘missing’.

Add optional parameter in react-router

To define any path, you need to import a custom <Route> component from react-router library, and have necessary environment (<BrowserRouter>) to use it.

Set path attribute of a Route component to a string that tells React what components to render depending on current URL.

Optional Params in React – Example

In react router, optional parameters are defined using a question mark. Keep in mind that question mark needs to be added at the end.

<Route path="/cart/:productId?" element={<ShoppingCart />} />

In this case, the ShoppingCart component will be rendered if the URL matches /cart/ path, as well as if the URL has additional productid parameter.

This simple and easy-to-understand syntax is compatible with react-router versions above 4, with few exceptions*.

Now, let’s see how to define optional parameter using react router versions that do not support this syntax.

If your version of react-router does not support optional params

Versions earlier than react router v4 and releases between 6 and 6.4.5 do not support using a question mark to add optional params to the URL.

The solution is to write two paths, one that includes optional parameter, and one that doesn’t.

<Route path="/cart/:productId" element={< ShoppingCart />} />
<Route path="/cart/" element={< ShoppingCart />} />

This approach takes more lines of code, but accomplishes the same as using the question mark. So technically, the only difference is conciseness of code.