Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to pass parameters in react-router-dom Link? [duplicate]

I have links to components-pages, for example:

<Link to="/"> Home <Link/> 

In props I have a parameter, for example userId. I need to pass it in Link. I know how to pass params in onCLick():

this.props.router.push({
  pathname: '/',
  state: {
    userId: 7
  }
})

How I understand in ink can be performed onClick, but may be it's possible to pass somehow params in it? Without creating onClick?

like image 264
Sam Fisher Avatar asked Apr 03 '18 08:04

Sam Fisher


People also ask

How do you pass multiple parameters in react?

To pass multiple parameters to onChange in React:Pass an arrow function to the onChange prop. The arrow function will get called with the event object. Call your handleChange function and pass it the event and the rest of the parameters.

Can you pass props in link react router?

Passing props without stateWhen you pass the props through state, react router persists to the history. state which is using the history API that can be accessed in browsers through the DOM window object. The only drawback of history. state object is that it's limited to 640k characters when it's been serialised.

What is the difference between link and NavLink in react router dom?

The NavLink is used when you want to highlight a link as active. So, on every routing to a page, the link is highlighted according to the activeClassName . Link is for links that need no highlighting.


1 Answers

Yes, you can pass an object to the "to" prop like this.

 <Link to={{
  pathname: '/courses',
  search: '?sort=name',
  hash: '#the-hash',
  state: { fromDashboard: true }
 }}/>

Check the documentation for more. https://reacttraining.com/react-router/web/api/Link.

like image 160
Kris Avatar answered Oct 22 '22 08:10

Kris