1

1) 在反应路由器中

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

2) 搜索组件

<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) 结果组件

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

在此处输入图像描述

4

2 回答 2

1

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

我建议将电影的标题(或 id)保留在 URL 中(正如您已经完成的那样),然后ResultPage component根据电影的标题或 id 接收所需的数据。您可以利用 React 生命周期来发送请求以获取数据。您可以在文档中阅读有关在类和功能组件中获取数据的最佳方式的更多信息。

另一个可以解决您的问题但我不推荐的解决方案是将数据存储在 Cookie 或本地存储中,并使其在重新加载时可以访问。

于 2021-07-18T10:38:34.590 回答
0

所以这是客户端路由的问题,基本上在你可以点击你的url之前,在这种情况下http://disnyplus.plus/movie/avengers-endgame,你的浏览器向服务器发出请求,由于不存在服务器路由,页面将导致错误。这样做是因为并非所有获取电影所需的 javascript 都已执行。React 让您通过执行一些 javascript 打开网站上的页面而无需刷新。

我可以推荐的一种可能的解决方案是使用 HashRouter,你的 url 看起来像这样http://disnyplus.plus/#/movie/avengers-endgame

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

如果您很好奇,我认为这个答案确实确定了服务器/客户端/混合端路由,即使问题与您的问题不匹配。我想你可以从中学到一些东西。

反应路由器网址

于 2021-07-18T10:44:17.613 回答