48

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.

1

4 Answers 4

134

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

5
  • So when passing props outside of named parameters, I guess there's no way to access them at props root? You have to go into location.state to get them?
    – Matt
    Jul 15, 2018 at 1:44
  • @MegaMatt yes props.location.state.myPropName Aug 6, 2018 at 18:19
  • 3
    Make sure to wrap your component with withRouter HOC. Apr 3, 2020 at 7:26
  • 2
    I'm getting an undefined all the time I pass data with the above solution. Any help? Apr 3, 2020 at 10:14
  • @MohhamadHasham This is an important point. This question explains it further.
    – AkThao
    Jul 31, 2020 at 11:19
7

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.

0
6

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

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>

  1. Declare a route
<Route
  exact
  path={`page/:id`}
  component={BComponent}
/>
  1. 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 ()
}
1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.