How do I pass props in react router v4?

Question

I need to pass some data in Link component of react router v4, but I cannot find a way to do it.

Basically, I have some links that are dynamically generated. I have linked these links with Link component in the following way. Upon clicking one of these links, user is routed to a new component. I want to pass some data into these new component so that I can display them there.

<Link to="dynamic link here">some text</Link>

Is there some sort of <Link to="path" data="data here">some text</Link> method in react router v4? I cannot seem to find it in the documentation page.

Answer 1

You can pass an object as the to prop and specify state. See the docs.

<Link to={{
  pathname: '/courses',
  state: { fromDashboard: true }
}}> Courses </Link>

Then you can grab that state in the new route from this.props.location.state