React Router 4 Optional parameter with custom path

Question

I have this route below that loads a dashboard component:

<Route
  path={`${match.url}/dashboard`}
  render={params => <Dashboard {...params} />}
/>

Now, I want to add an optional parameter that would only be valid if it's being preceded by an additional path (e.g. additional-path/:param). I tried the code below but I'm not getting the value of the optional param:

<Route
  path={`${match.url}/dashboard/(filter/:filtername)?`}
  render={params => <Dashboard {...params} />}
/>

Could somebody tell me whats wrong with the code below?

Steve Holgado · Accepted Answer · 2017-11-02 19:36:58Z

6

In older versions of React Router you would define optional parameters with parentheses, for example: `${match.url}/dashboard/filter(/:filtername)`

For React Router V4 you define the optional filtername parameter with a trailing ? like this:

<Route 
  path={ `${match.url}/dashboard/filter/:filtername?` } 
  render={ params => <Dashboard { ...params } /> } 
/>

Or you can define multiple optional parameters, filter and filtername, like this:

<Route 
  path={ `${match.url}/dashboard/:filter?/:filtername?` } 
  render={ params => <Dashboard { ...params } /> } 
/>

edited Nov 2, 2017 at 19:36

answered Nov 2, 2017 at 19:22

Steve Holgado

12.1k4 gold badges26 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gapur Kassym · Accepted Answer · 2018-04-25 08:32:11Z

0

You can use path param optional on react-router 4 like that:

<Route exact path="/account" component={Orders} />

<Route exact path="/account/orders?" component={Orders} />

So to define a parameter as optional you add a trailing question-mark (?). Also for multiple optional parameters:

<Route path="/account/:pathParam1?/:pathParam2?" component={Orders} />

answered Apr 25, 2018 at 8:32

Gapur Kassym

1,20115 silver badges11 bronze badges

Collectives™ on Stack Overflow

React Router 4 Optional parameter with custom path

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related