如何根据从 React 中的 API 拉取的所选图像导航到新页面？

Question

我有一个个人电影数据库网站，我正在使用 react.js。首页显示主要推荐的随机电影，然后是特定行的电影。这些电影都是使用 TMDB.org 的 API 生成的。

我想要完成的是能够单击图像（或主要推荐的电影）并重定向到特定于请求的电影的页面，其中包含照片、发布日期等归因数据

我假设我需要做一些类似 getElementByID 函数的事情，但我不确定该怎么做。另外，我将如何在我的 app.js 中链接它。 （现在我有一个 MovieDetails.jsx 页面，可以通过转到 url/moviedetails 页面来访问它。我假设它会使用该页面并在你每次看新电影时更改它。）

这是从特定电影标题中提取图像的代码。

 <div className="w-[160px] sm:w-[200px] md:w-[240px] lg:w-[280px] inline-block cursor-pointer relative p-2">
      <img
        className="w-full h-auto block"
        src={`https://image.tmdb.org/t/p/w500/${item?.backdrop_path}`}
        alt={item?.title}
      />
      <div className="absolute top-0 left-0 w-full h-full hover:bg-black/80 opacity-0 hover:opacity-100 text-white">
        <p className="white-space-normal text-xs md:text-sm font-bold flex justify-center items-center h-full text-center">
          {item?.title}
        </p>
      </div>
    </div>

Answer 1

可以使用动态页面来处理

1- 在你的

App.js

:

<BrowserRouter>
    <Route path="movie/:id" element={<Movie />} />
</BrowserRouter>

2- 将

Link

添加到您的图像中：

<Link to={`movie/${item?.id}`}>
    <img
        className="w-full h-auto block"
        src={`https://image.tmdb.org/t/p/w500/${item?.backdrop_path}`}
        alt={item?.title}
    />
</Link>

想法是将一个id传递给一个依赖于这个id的动态页面。
确保您的数据中有

id

属性。

3-制作一个新组件

Movie.js

：

const Movie = () => {
    let { id } = useParams();
    // Fetch the data depend on the "id" or just filter it
    return (
        // Your Code here
    )
}

当然不要忘记导入

我希望这对你来说很清楚