HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptreactCritical

React Router with optional path parameter

Submitted by: @import:stackoverflow-api··
0
Viewed 0 times
pathparameteroptionalreactwithrouter

Problem

I want to declare a path with an optional path parameter, hence when I add it the page to do something extra (e.g. fill some data):


http://localhost/app/path/to/page <= render the page
http://localhost/app/path/to/page/pathParam <= render the page with
some data according to the pathParam

In my react router I have the following paths, in order to support the two options (this is a simplified example):

    
   
      
      
       


My question is, can we declare it in one route? If I add only the second row then the route without the parameter is not found.

EDIT#1:

The solution mentioned here about the following syntax did not work for me, is it a proper one? Does it exist in the documentation?



My react-router version is: 1.0.3

Solution

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:



and for multiple optional parameters:



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

Check the React Router v6 documentation for Optional Segments.

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

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:



and for multiple optional parameters:



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

Code Snippets

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

Context

Stack Overflow Q#35604617, score: 864

Revisions (0)

No revisions yet.