6

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.

Zip
  • 5,372
  • 9
  • 28
  • 39

1 Answers1

18

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

Tyler McGinnis
  • 34,836
  • 16
  • 72
  • 77
  • This is weird. It worked the first time and after I changed pathname to a variable, it does not work anymore even after I changed the pathname back to a static route without the variable. – Zip Mar 20 '17 at 13:15
  • I tried with closing the ```Link``` component instead of self-closing itself and it works again. So instead of ``````, I did ```some text```. – Zip Mar 20 '17 at 13:24