Several options with React Router

Question

I am using React 15.0.2 and React Router 2.4.0. I want to pass a few parameters to my route, and I'm not sure how to do this in the best way:

<Route name="User" path="/user" component={UserPage}> <Route name="addTaskModal" path="/user/manage:id" component={ManageTaskPage} /> </Route> 

And what you need is something like:

  <Route name="User" path="/user" component={UserPage}> <Route name="addTaskModal" path="/user/manage:id:type" component={ManageTaskPage} /> </Route> 

Answer 1

As @ alexander-t mentioned:

 path="/user/manage/:id/:type" 

If you want to leave them optional:

 path="/user/manage(/:id)(/:type)" 

---

React Router v4

React Router v4 is different from v1-v3, and optional path parameters are not explicitly defined in the documentation .

Instead, you must specify a path parameter that path-to-regexp understands. This provides more flexibility in defining your paths, such as repeating patterns, wildcards, etc. Therefore, to define a parameter as optional, you add an end question mark (?).

So, to determine the optional parameters, you can do:

 path="/user/manage/:pathParam1?/:pathParam2?" 

those.

 <Route path="/user/manage/:pathParam1?/:pathParam2?" component={MyPage} /> 

Whereas in V4 the required parameters are still the same:

 path="/user/manage/:id/:type" 

To access the PathParam value, you can do:

 this.props.match.params.pathParam1 

Answer 2

For optional parameter fields, for some reason, it works fine without a slash before the colon inside curly braces (). React-router 2.6x

Answer 3

Try this

 <Route name="User" path="/user" component={UserPage}> <Route name="addTaskModal" path="/user/manage/:id/:type" component={ManageTaskPage} /> </Route>