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.stateconsole.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.paramsconsole.log(id) // "foo"
Sources
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.
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>