How to pass props using Link in react-router
Maybe you’re stuck with data in one component and want to pass that data through react-router’s component just like I was. As of react-route v4 you can pass pathname
and query
within the to
attribute like so:
const backUrl = '/some/other/value'
// this.props.testvalue === "hello"
<Link to={{pathname: `/${this.props.testvalue}`, query: {backUrl}}} />
This can be useful if you want to change data on the linked component depending on an action the user just took. To read both the pathname and the query values in the linked component you can use:
console.log(this.props.match.params.testvalue, this.props.location.query.backurl)
// output
hello /some/other/value