Home > Software design >  can't pass props using Link in react router dom
can't pass props using Link in react router dom

Time:01-18

enter image description here


 <Link to={{pathname:"/Watch", movie:movie}} >

using this to pass props over Watch page but can't get any value.

I am new to react so there might be silly mistake or might be insufficient information. please let me know regarding any extra info

CodePudding user response:

If you want to pass any state to the component which gets rendered on the path given, you need to paas it in state property of the "to" object as shown here - https://v5.reactrouter.com/web/api/Link/to-object

So just change your code as below -

 <Link to={{pathname:"/Watch", state :{movie:movie}}} >

Also, please check the version of react-router in your package.json. Based on that check the react-router documentation. Thanks

CodePudding user response:

If you are using react-router-dom v5 then route state is a property on the to object of the Link.

RRDv5 Link

<Link to={{ pathname: "/Watch", state: { movie } }}>...</Link>

If using react-router-dom v6 then state is a top-level prop.

RRDv6 Link

<Link to="/Watch" state={{ movie }}>...</Link>
  •  Tags:  
  • Related