Passing values through React-Router v4 <Link />

Question

Question: How can I pass a prop or a single value, like an _id, through React-Router's Link component, and catch it at the endpoint?

This is what I mean: Let's say we are on page /a. The Link will take the user to /b. As such <Link to='/b'>. Now, I need to pass an _id through the Link, from /a, to /b.

<Link to='/b' params={_id}>blah blah</Link> 

The id I'm trying to pass is the property of an object in which the Link component is nested in.

I found this syntax params={} in another StackOverflow thread. My code compiled without breaking, so that probably means it worked? However, I'm not sure about how to retrieve this passed value at the endpoint.

Any help will be greatly appreciated.

Answer 1

Passing props

You can pass arbitrary props to a route via the state object:

<Link to={{ pathname: '/route', state: { foo: 'bar'} }}>My route</Link> 

Then you can access the state object from within your component:

const {foo} = props.location.state  console.log(foo) // "bar" 

Passing parameters

Configure your route path to accept named parameters (:id):

<Route path='/route/:id' exact component={MyComponent} /> 

Then you can pass URL parameters such as IDs in your link to:

<Link to={`route/foo`}>My route</Link> 

You can access the parameter within your component via the match object:

const {id} = props.match.params  console.log(id) // "foo" 

Sources

• https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/location.md

• https://github.com/ReactTraining/react-router/issues/4036

Answer 2

To pass data via the Link component, you might just want to accept a param on the actual link.

<Link to={`/b/${_id}`}>blah blah</Link> 

and in the Route, you'd set something like this up

<Route path="b/:id" name="routename" component={foo}></Route>

You can then access the param in the new route via this.props.match.params.id

If you really do not want your id in the actual route, it gets a little more annoying.