React router, pass data when navigating programati

问题:

We could navigate to different path using

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

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

There are other options I can think of, but wonder if passing object is possible at all?

• I could embed id of the object and refetch the object from server from the new page.

• Or I could store the object in global storage like redux store. (This object needs to be removed from the store soon. So I'm thinking it might not be good to put it there in the first place)

回答1:

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

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

On the page that is navigated to, the current location will be injected into the component whose route matched, so you can access the state using this.props.location.state.

One thing to keep in mind is that there will be no state if a user navigates directly to the page, so you will still need some mechanism to load the data when it does not exist.

回答2:

If you're using React Router 4, the current answers are outdated. Call history.push on React Router 4, and pass an object as the 2nd param to pass state:

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

回答3:

Passing query parameters when programatically navigation in react router

History objects may be used programmatically change the current location using both history.push and history.replace.

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

If we pass the history object down into a component as props. Then we can navigate programatically using the react router methods available on the history object.

Now lets assume you are passing down the history object as a prop called 'router'. So it would be referenced inside a component with class based syntax like:

this.props.router

When using push or replace you can either specify both the URL path and state as separate arguments or include everything in a single 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 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 the this.props.router is actually the history object from the react-router api.

回答4:

I don't know which version you are using but you can give object as a parameter to react-router:

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

回答5:

I was not able to get this working with react-router v4+. But the following does work:

//I.e. 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)
    })