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.
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
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>