javascript - React Router 动态路由:无效的 URL
问题描述
1) 在反应路由器中
<Route path={"/movie/:id"} component={ResultPage} />
2) 搜索组件
当我搜索电影时,它会点击 API 并显示一个Result
组件。每个结果Link
都指向一条动态路线(上图)。
<div className="results">
{data.map((movie) => (
<Result
poster_path={movie.poster_path}
alt={movie.title}
key={movie.id}
id={movie.id}
title={movie.title}
overview={movie.overview}
release_date={movie.release_date}
genre_ids={movie.genre_ids}
/>
))}
</div>;
3) 结果组件
我在 中传递了一些道具,Link
并用于props.location.state
获取该ResultPage
组件的其余电影数据。
export default function Result(props) {
const { poster_path: poster, alt, title } = props;
return (
<div className="result">
<Link
to={{
pathname: `/movie/${title}`,
state: { ...props },
}}
>
<img
src={
poster
? `https://image.tmdb.org/t/p/original/${poster}`
: "https://www.genius100visions.com/wp-content/uploads/2017/09/placeholder-vertical.jpg"
}
alt={alt}
/>
</Link>
</div>
);
}
4) ResultPage 组件
您现在可以看到 URL,http://disnyplus.plus/movie/avengers-endgame
但是如果您打开一个新选项卡并复制/粘贴相同的 URL,页面将出错,因为它没有所有数据是我的猜测,因为它是props
从搜索中获得的 -> 单击结果 -> ResultPage 流。
是否有另一种方法来实现这一点,或者是使用动态页面并传递给它的副作用props
?
解决方案
如您所见,当用户刷新页面或访问页面而不从搜索页面重定向时,无法访问存储在 props.location.state 中的数据。因此,这不是一个好的做法。
我建议将电影的标题(或 id)保留在 URL 中(正如您已经完成的那样),然后ResultPage component
根据电影的标题或 id 接收所需的数据。您可以利用 React 生命周期来发送请求以获取数据。您可以在文档中阅读有关在类和功能组件中获取数据的最佳方式的更多信息。
另一个可以解决您的问题但我不推荐的解决方案是将数据存储在 Cookie 或本地存储中,并使其在重新加载时可以访问。
推荐阅读
- python - 使用熊猫数据的概率密度函数
- maven - Jenkins 插件包括节点和节点依赖项?
- javascript - Angular 2 到最新版本 - jsonp 和 URLSearchParams 到 HttpClient 和 HttpParams
- php - Symfony API 平台实体继承
- ansible - 如何使ansible任务仅在一台主机上运行?对于每个应用程序
- symfony-4.3 - Symfony 4.3 如果克隆为 git 子模块,如何启用 Bundle
- javascript - 将外部音频与 html 画布动画同步
- javascript - 如何匹配所有值而不让 for-in 循环中的闭包覆盖对象?
- spring - Spring Security ACL 与 Authorization 有何不同
- javascript - 在 Moment.js 中创建日期