Passing values through React-Router v4 <Link />

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

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

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

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>

If you are using react hooks you can get the parameters passed from state object using useLocation

1. Link to the other page

<Link to={{ pathname: `page/${id}`, state: { foo: 'bar'} }}>Click me</Link>

2. Declare a route

<Route
  exact
  path={`page/:id`}
  component={BComponent}
/>

3. Get the location parameters and then the use state containing your key-value pair object

const BComponent = (props) => {
  const location = useLocation();
  console.log(location.state.foo);

  return ()
}