React中如何实现点击API获取的电影图片跳转至影片详情页？

1. 安装依赖并配置路由 #

先确保已安装react-router-dom，未安装则执行：

npm install react-router-dom
# 或
yarn add react-router-dom

在App.js中配置路由规则，给详情页添加动态参数以接收影片ID：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './path-to-your-home-component'; // 替换为你的首页组件路径
import MovieDetails from './MovieDetails';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        {/* :movieId为动态参数，用于传递点击的影片ID */}
        <Route path="/moviedetails/:movieId" element={<MovieDetails />} />
      </Routes>
    </Router>
  );
}

export default App;

2. 实现点击跳转逻辑 #

无需使用getElementById，React提供两种简洁的跳转方式：

方法一：用Link组件包裹点击区域（推荐） #

将可点击的影片卡片整体包裹在Link组件内，跳转路径带上当前影片的ID：

import { Link } from 'react-router-dom';

// 假设item包含TMDB返回的影片id字段
<div className="w-[160px] sm:w-[200px] md:w-[240px] lg:w-[280px] inline-block cursor-pointer relative p-2">
  <Link to={`/moviedetails/${item?.id}`}>
    <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>
  </Link>
</div>

方法二：用useNavigate钩子（适合带额外逻辑的场景） #

如果点击时需要执行埋点、数据校验等操作，可使用命令式跳转：

import { useNavigate } from 'react-router-dom';

function MovieCard({ item }) {
  const navigate = useNavigate();

  const handleClick = () => {
    // 这里可添加额外逻辑，比如统计点击次数
    navigate(`/moviedetails/${item?.id}`);
  };

  return (
    <div 
      className="w-[160px] sm:w-[200px] md:w-[240px] lg:w-[280px] inline-block cursor-pointer relative p-2"
      onClick={handleClick}
    >
      <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>
  );
}

3. 在MovieDetails.jsx中获取并展示影片数据 #

使用useParams钩子拿到路由参数里的影片ID，再调用TMDB API获取详情：

import { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';

function MovieDetails() {
  const { movieId } = useParams();
  const [movie, setMovie] = useState(null);
  const [loading, setLoading] = useState(true);
  const TMDB_API_KEY = '你的TMDB API密钥'; // 替换为你的密钥

  useEffect(() => {
    const fetchMovieDetails = async () => {
      try {
        const response = await fetch(`https://api.themoviedb.org/3/movie/${movieId}?api_key=${TMDB_API_KEY}&language=zh-CN`);
        const data = await response.json();
        setMovie(data);
      } catch (error) {
        console.error('获取影片详情失败:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchMovieDetails();
  }, [movieId]);

  if (loading) return <div>加载中...</div>;
  if (!movie) return <div>未找到影片</div>;

  return (
    <div className="movie-details-container">
      <img 
        src={`https://image.tmdb.org/t/p/w500/${movie.poster_path}`} 
        alt={movie.title}
        className="poster"
      />
      <h1>{movie.title}</h1>
      <p>上映日期: {movie.release_date}</p>
      <p>评分: {movie.vote_average}</p>
      <p>简介: {movie.overview}</p>
      {/* 可添加更多需要展示的字段 */}
    </div>
  );
}

export default MovieDetails;

关键提示 #

• React是数据驱动框架，完全不需要getElementById这类DOM操作，通过路由参数和组件状态即可实现数据传递与页面交互。
• TMDB返回的影片数据默认包含id字段，直接用该字段作为路由参数即可。
• 记得替换代码中的API密钥和组件路径，匹配你的项目结构。

内容的提问来源于stack exchange，提问作者McKay