Passing values through React-Router v4 <Link />

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

If you want to send more than one parameter through a route, you can do it like this.

1.Link element

<Link to={`/exchangeClicked/${variable1} ,${variable2},${variable3}`} >Click
</Link>

2.Configure your route path to accept those parameters

<Route
      exact
      path="/exchangeClicked/:variable1,:variable2,:variable3"
      component={MyComponent}
 />

3.You can then access the param in the new route via,

<Typography variant="h4" color="inherit">
    Exchange:{this.props.match.params.variable1}
</Typography>


<Typography variant="Body 1" color="inherit">
    Type:{this.props.match.params.variable2}
</Typography>

<Typography variant="Body 1" color="inherit">
    Durabiliy:{this.props.match.params.variable3}
</Typography>

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.