Multiple params with React Router

Question

I use React 15.0.2 and React Router 2.4.0. I want to pass multiple params to my route and I'm not sure how to do it in the best way:

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

And what is want is something like:

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

Yes, thanks for the reply. I was just thinking about that. Didn't take my coffee yet. Need to start my brain. — G. Frx, Jun 08 '16 at 07:55

score 138 · Accepted Answer · edited Jun 26 '18 at 10:53

138

As @alexander-t mentioned:

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

If you want to keep them optional:

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

React Router v4

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

Instead, 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 (?).

So, to define optional parameters, you can do:

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

i.e.

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

Whereas, The mandatory Parameters are still same in V4:

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

To access PathParam's value, you can do :

this.props.match.params.pathParam1

edited Jun 26 '18 at 10:53

Sabir Hussain

2,802
2
14
19

answered Jun 20 '16 at 09:04

Tomas Randus

2,127
4
29
38

23

Just a quick note – in React Router 4, optional params look like this: `/user/manage/:id?/:type?` – helb Dec 06 '17 at 18:23
9

Could you please let me know how to specify the path with multiple named parameters? like these: `/route?param1=val1&param2=val2` – rehman_00001 May 23 '19 at 11:35
1

@rehman_00001 I got the solution to the same problem. [Here it is explained really well](https://stackoverflow.com/a/61948784/7579494) – Marvin Kang' Sep 10 '20 at 15:46
can I hide the parameter in the address bar? thanks – Herbert Yeo Mar 18 '21 at 06:56

score 10 · Answer 2 · answered Jul 13 '21 at 06:14

10

<Route path="/:category/:id" exact component={ItemDetails} />

In the component, using useParams from react-router-dom,

import { useParams } from 'react-router-dom'
export default function ItemDetails(props) {

const {id, category} = useParams();
return (
    <div className="">
        {id}
        {category}
    </div>
)

Here is the solution, without props and using routing library.

answered Jul 13 '21 at 06:14

Bikram Nath

483
6
15

Using the 'exact' prop on Route component worked for me, thanks – Karthik Dec 20 '22 at 16:28

score 6 · Answer 3 · answered Jan 09 '19 at 11:39

6

Try this

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

answered Jan 09 '19 at 11:39

Sultan Aslam

5,600
2
38
44

score 1 · Answer 4 · answered Jul 31 '17 at 10:41

1

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

answered Jul 31 '17 at 10:41

Har

33
1
1
4

Multiple params with React Router

4 Answers4

React Router v4

Linked