React Router 动态路由：无效 URL

Question

1) 在 React 路由器中

<Route path={"/movie/:id"} component={ResultPage} />

2) 搜索组件

当我搜索电影时，它会点击 API 并显示 Result component.Each 结果 Links 到动态路径（上图）。

<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 但是如果您打开一个新标签页并且 copy/paste 相同 URL 页面将出错，因为它没有拥有所有数据是我的猜测，因为它是从 props 从搜索 -> 单击结果 -> 结果页面流中获得的。

是否有另一种方法可以实现此目的，或者是使用动态页面并将 props 传递给它的副作用？

Answer 1

如您所见，当用户刷新页面或访问页面而不从搜索页面重定向时，无法访问存储在 props.location.state 中的数据。因此，这不是一个好的做法。

我建议将电影的标题（或 id ）保留在 URL 中（正如您已经完成的那样），然后根据标题在 ResultPage component 中接收所需的数据或电影的 ID。您可以利用 React 生命周期发送请求以获取数据。您可以在 class 和功能组件 here in the documnetation.

中阅读更多有关获取数据的最佳方式的信息

可以解决您的问题的另一种解决方案是将数据存储在 Cookie 或本地存储中，并使它们在重新加载时可以访问。

Answer 2

所以这是客户端路由的问题，基本上在你可以点击你的 url 之前，在这种情况下 http://disnyplus.plus/movie/avengers-endgame，你的浏览器向服务器发出请求并且因为没有服务器路由存在，页面将导致错误。之所以这样做，是因为尚未执行获取电影所需的所有 javascript。 React 允许您通过执行一些 javascript.

打开您网站上的页面而无需刷新

我可以推荐的可能解决方案之一是改用 HashRouter，您的 url 看起来像这样 http://disnyplus.plus/#/movie/avengers-endgame。

哈希路由忽略哈希后的 url 部分，因此它们不会向服务器询问特定的 url，但它们所做的是先调用索引页面，然后再呈现什么他们应该相应地。

如果您很好奇，我认为这个答案确实解决了 server/client/hybrid 侧路由问题，即使问题与您的问题不符。我想你可以从中学到一些东西。