Respond to a router, transfer data when navigating programmatically?

Question

We could go another way using

this.props.router.push('/some/path')

Is there a way to send parameters (object) when navigating?

There are other options that I can think of, but I wonder if passing an object possible?

• I could embed the object id and restore the object from the server from a new page.

• Or I could store the object in global storage, for example, in the redux store. (This item needs to be removed from the store soon. Therefore, I think it might not be good to put it in the first place)

Answer 1

React Router uses location objects. One of the properties of the location object is state .

 this.props.router.push({ pathname: '/other-page', state: { id: 7, color: 'green' } }) 

On the page that you are navigating to, the current location component will be entered into the component whose route is agreed, so you can access the state using this.props.location.state .

It should be borne in mind that there will be no state if the user goes directly to the page, so you still need some kind of mechanism to load data when it does not exist.

Answer 2

If you are using React Router 4 or 5, the current answers are out of date. Call history.push and pass the object as the second parameter to pass the state:

props.history.push('/other-page', { id: 7, color: 'green' }))

You can then access the status data in "/ other-page" via:

props.location.state

Answer 3

Passing request parameters during program navigation in the response router

History objects can be used programmatically to change the current location using history.push and history.replace.

  history.push('/home?the=query', { some: 'state' }) 

If we pass the story object to the component as a property. Then we can programmatically program using the router's response methods available in the history object.

Now suppose you are passing a history object as an alert called a “router”. Therefore, it will refer within the component with class-based syntax, for example:

 this.props.router 

When using push or replace, you can specify both the URL path and the state as separate arguments, or include everything in one location-like object as the first argument.

 this.props.router.push('/some/path?the=query') 

Or you can use a single location-like object to specify both the URL and the state. This is equivalent to the example above.

 this.props.router.push({ pathname: '/some/path', //path search: '?the=query' // query param named 'search' }) 

Note. Of course, make sure that this.props.router is actually a history object from the agent-router api.

Answer 4

I was unable to get this to work with a responsive v4 + router. But the following works:

 //Ie add navigate using the history stack and pass context as the 2nd parameter this.props.history.push('/takeTest', { subjectsList: this.props.subjectsList.filter(f => f.isChecked === true) }) 

Answer 5

I don’t know which version you are using, but you can specify the object as a react-router parameter:

 let {router} = this.props; router.push({pathname: "/newpath", query: {id: 1}) // will create the url /newpath?id=1 

Answer 6

if you want to send it in the query line

 this.props.router.push({ pathname: '/payment-history', query: { email: rowData.email } })