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