Often times when building an app with React Router you’ll need to pass props through a Link component to the new route. In this post, we’ll break down how that process works. There are two different ways to pass data from a component through to the new route that’s being rendered. The first is through URL Parameters and the second is through . Link state First, let’s take a look at URL parameters. If you’ve read our post, you’ll be familiar with this example. Say we were in charge of building out the that renders Twitter’s page. If created with React Router, that route may look like this URL Parameters Route profile <Route path='/:handle' component={Profile} /> Notice that is going to be dynamic. It could be anything from or to . handle tylermcginnis dan_abramov realDonaldTrump So in our app we may have a component that looks like this Link <Link to='/tylermcginnis'>Tyler McGinnis</Link> If clicked, the user would be taken to and the component would be able to access the dynamic handle ( ) from . /tylermcginnis Profile tylermcginnis props.match.params.handle class Profile extends React.Component {state = {user: null}componentDidMount () {const { handle } = this.props.match.params fetch(\`[https://api.twitter.com/user/${handle}\`](https://api.twitter.com/user/$%7Bhandle%7D`)) .then((user) => { this.setState(() => ({ user })) }) }render() {...}} URL parameters are great, but they’re not really meant to serve as a way to get data from one route to another as they’re limited to just strings. What if instead of just a string, we wanted to pass something a little more complex, like an object or an array? There would be no way to do that with URL parameters. This brings us to the second way to pass data from one route to another and that’s with . state Going back to our example from earlier, what if we wanted to pass along if the user is coming from a certain route through to the component when the user clicks on the ? React Router gives us a way to do that and the API looks like this Profile Link <Link to={{pathname: '/tylermcginnis',state: {fromNotifications: true}}}>Tyler McGinnis</Link> Now, the component that’s being rendered for that route (in this case, ) would be able to access by accessing . Profile fromNotifications props.location.state class Profile extends React.Component {state = {user: null}componentDidMount () {const { handle } = this.props.match.paramsconst { fromNotifications } = this.props.location.state fetch(\`[https://api.twitter.com/user/${handle}\`](https://api.twitter.com/user/$%7Bhandle%7D`)) .then((user) => { this.setState(() => ({ user })) }) }render() {...}} To recap, there are two ways to pass data from a through to the new route: URL parameters and . URL parameters work great for strings, but break down after that. By making the s prop an object, you can pass along any sort of data you need under the property and that data can be accessed in the new route under . Link state Link to state props.location.state This was originally published at tylermcginnis.com as part of their React Router course.
