How to set an optional parameter on root route in react-router v4?

Question

Let's say I have the following 2 routes:

    ...
    <Route exact path="/:param1?/" component={Home}/>
    <Route path="/news" component={News}/>
    ...

now when I try to hit route /news the root route for Home with the parameter param1 is triggered...

I assume the solution would be to set a questionmark before the param1 like this /?param1 so it can be held appart from the routes, but I can not figure out how to do this in react-router v4

Possible duplicate of React Router with optional path parameter — Chris
– Chris, Commented Mar 16, 2017 at 8:20
absolutely not, I know how to set optional parameter, (which is the question in your link)! My question is more about how to differentiate between the parameter and another route... see the answer below... — henk
– henk, Commented Mar 17, 2017 at 12:34

Tyler McGinnis · Accepted Answer · 2017-03-16 16:46:36Z

14

There's an example of how to do this in the official docs. You can find that here.

You'll need to use the Switch component with your /news Route being first.

<Switch>
    <Route path="/news" component={News}/>
    <Route exact path="/:param1?/" component={Home}/>
</Switch>

Switch will always only render one Route. So in the case above, if /news doesn't become active, then /:param1 will be.

answered Mar 16, 2017 at 16:46

Tyler McGinnis

35.4k16 gold badges74 silver badges79 bronze badges

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

1 Comment

Kholiavko Over a year ago

Hey man, could you please help me how to create router for homepage with optional path (for example language) I try something like this:

<Switch>     <Route exact path="/:language?" component={FirstPage} />     <Route exact path="/:language?/add" component={AddPage} /> </Switch>

but in this case the second route does not work correctly without language params.

Collectives™ on Stack Overflow

How to set an optional parameter on root route in react-router v4?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related