In React Router, how do you pass route parameters when using browser history push?

Question

Using the newer version of React Router, how do you pass parameters to the route you are transitioning to if you are transitioning using the browserHistory.push()? I am open to using some other way to transitioning if browserHistory does not allow this. I see that in my top most child component in React Router there is this.props.routeParams but I can't seem to get this populated with values I want from the previous route when transitioning.

score 65 · Accepted Answer · edited Jun 05 '20 at 08:26

65

Now you will have do something like this

history.push({
  pathname: '/about',
  search: '?the=search',
  state: { some: 'state' }
})

Here is the link for API documentation

edited Jun 05 '20 at 08:26

Serge Kishiko

466
1
6
13

answered Aug 04 '16 at 06:55

Deadfish

2,047
16
17

7

inside the `location` object obtained from the props – Deadfish Mar 24 '17 at 08:27
3

on next page access state using this.props.location.state.some – Shashi3456643 Jun 15 '17 at 22:35
3

Is this still valid in React Router V4 ? – Mendes Nov 10 '17 at 13:25

score 3 · Answer 2 · edited Dec 16 '20 at 13:28

for react router v4 we can do things this way:

const history = useHistory();
 history.push({
      pathname: "/create-opinion/"+user,
      state:{  username:userName}
    };

and to get it from the other component simply:

const history = useHistory();

then to get username:

const username = history.location.state.username;

don't forget to import useHistory from react-router-dom

if you haven't install react-router-dom yet type:

$ npm install --save react-router-dom

score 0 · Answer 3 · answered Jan 16 '21 at 07:06

If you want to pass a path parameter you can do it as follows. I am using sample component Merchant.

Define Route

<Route exact path="/merchant/:id" render={(props) => <Merchant id={props.match.params.id}/>} />

Define History

const history = createBrowserHistory({
    basename:''
})

Add to history with parameter

history.push(`/merchant/${id}`)

In React Router, how do you pass route parameters when using browser history push?

3 Answers3

Linked