无法在反应路由器 dom 中使用 Link 传递道具

Question

 <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

Answer 1

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>

Answer 2

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