在reactjs中使用uselocation()未从指定路径获取数据

Question

我是reactjs的新手，并尝试构建一个像Netflix这样的电影项目。我尝试从MovieList页面传递电影数据，并使用链接组件将电影数据传递到另一个页面，即下面的"观看"页面。我在此页面中提供了"监视"页面的路径名。

<Link to={{ pathname: "/watch", movie: movie }}>
<div
className="listItem"
style={{ left: isHovered && index * 300 - 40 + index * 6.5 }}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
{isHovered || <img src={movie?.img} alt="" />}
{isHovered && (
<>
<video src={movie?.trailer} autoPlay={true} muted loop />
<div className="info">
<div className="icons">
<PlayArrow className="icon" />
<Add className="icon" />
<ThumbUpAltOutlined className="icon" />
<ThumbDownAltOutlined className="icon" />
</div>
<div className="data">
<span>{movie?.duration}</span>
<span className="limit">1h</span>
<span>{movie?.year}</span>
</div>
<div className="desc">{movie?.desc}</div>
<div className="genre">{movie?.genre}</div>
</div>
</>
)}
</div>
</Link>

在观察页面上，我使用useLocation((获取数据，并尝试console.log(location(查看它是否包含所需的数据，但只显示路径名而不显示对象(data(。

const Watch = () => {
const location = useLocation();
console.log(location);
return (
<div className="watch">
<Link to="/">
<div className="arrow">
<ArrowBackOutlined />
Home
</div>
</Link>
<video
className="video"
autoPlay
progress
controls
src="./assets/video/trailer.mp4"
/>
</div>
);
};

以下是我控制台日志时的结果

console.log

是我没有以正确的方式传递数据，还是它有了新的方式来传递数据？

Answer 1

根据文档，您可以通过以下方式传递数据：

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

由于密钥和电影的价值是相同的，这也会起作用：

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

https://v5.reactrouter.com/web/api/Link

Answer 2

试着像这样在链接中传递状态。

<Link to="/watch" state={{movie:movie}}> 

它对我有效。