问题描述
1) 在 React 路由器中
<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) 结果页面组件
您可以看到 URL 现在是 http://disnyplus.plus/movie/avengers-endgame 但是如果您打开一个新选项卡并复制/粘贴相同的 URL 该页面将出错，因为它没有所有数据是我的猜测，因为它是从 props 的 Search -> Click Result -> ResultPage 流程中获取的。
是否有另一种方法可以实现这一点，或者是使用动态页面并将 props 传递给它的副作用？
解决方法
如您所见，当用户刷新页面或访问页面而不从搜索页面重定向时，无法访问存储在 props.location.state 中的数据。因此，这不是一个好的做法。
我建议在 URL 中保留电影的标题（或 id ）（正如您已经完成的那样），然后根据电影的标题或 id 在 ResultPage component 中接收所需的数据。您可以利用 React 生命周期发送请求以获取数据。您可以阅读有关在类和函数组件 here in the documnetation 中获取数据的最佳方法的更多信息。
另一种可以解决您的问题但我不推荐的解决方案是将数据存储在 Cookie 或本地存储中，并使其在重新加载时可以访问。
,所以这是客户端路由的问题，基本上在你可以点击你的 url 之前，在这种情况下 http://disnyplus.plus/movie/avengers-endgame，你的浏览器向服务器发出请求，并且由于没有服务器路由存在，页面将导致错误。这样做是因为并非所有获取电影所需的 javascript 都已执行。 React 让您通过执行一些 javascript 来打开网站上的页面而无需刷新。
我可以推荐的可能解决方案之一是改用 HashRouter，您的网址将类似于 http://disnyplus.plus/#/movie/avengers-endgame。
哈希路由会忽略哈希后的 url 部分，因此它们不会向服务器询问特定的 url，但它们所做的是首先调用索引页面，然后相应地呈现它们应该呈现的内容。
如果你很好奇，我认为这个答案确实解决了服务器/客户端/混合端路由，即使问题与你的不匹配。我想你可以从中学到一些东西。