如何修复返回空白页面的Axios单电影请求问题？

核心原因 #

React Router v6 不再自动给路由组件传递 match、location 这类props，你的Movie组件还在依赖props.match.params.id拿路由参数，导致根本取不到电影ID，API请求失败后页面一直停在Loading状态。

修复步骤 #

1. 用useParams替换props.match #

修改Movie组件，改用React Router v6提供的useParams钩子获取路由参数：

import React, { useState, useEffect } from "react";
import MovieDataService from '../services/MovieDataService';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia';
import Typography from '@mui/material/Typography';
import { CardActionArea } from '@mui/material';
import { Link, useParams } from "react-router-dom"; // 引入useParams

const Movie = ({ user }) => { // 只接收需要的user参数
  const { id } = useParams(); // 直接获取路由里的id
  const [movie, setMovie] = useState({
    _id: null,
    title: "",
    rated: "",
    plot: "",
    poster: ""
  });

  useEffect(() => {
    const fetchMovie = async () => {
      try {
        const response = await MovieDataService.get(id);
        setMovie(response.data);
        console.log(response.data);
      } catch (error) {
        console.error('Error fetching movie:', error);
      }
    };

    if (id) { // 有id就发起请求
      fetchMovie();
    }
  }, [id]); // 依赖项改成id

  if (!movie.title) {
    return (
      <Container className="Firstset">
        <div>Loading...</div>
      </Container>
    );
  }

  return (
    <Container className="Firstset">
      <Row>
        <Col key={movie._id} xs={12} sm={12} md={6} lg={3}>
          <Card sx={{ maxWidth: 345 }}>
            <CardActionArea>
              <CardMedia
                component="img"
                height="345"
                image={movie.poster ? movie.poster + "/345x300" : ""}
                alt={movie.title}
              />
              <CardContent>
                <Typography gutterBottom variant="h5" component="div">
                  {movie.title}
                </Typography>
                <Typography variant="body2" color="text.secondary">
                  Rated: {movie.rated}
                </Typography>
                <Typography variant="body2" color="text.secondary">
                  Plot: {movie.plot}
                </Typography>
                <Link to={`/movies/${id}/review`}>Add A review</Link> {/* 这里也用拿到的id */}
              </CardContent>
            </CardActionArea>
          </Card>
        </Col>
      </Row>
    </Container>
  );
};

export default Movie;

2. 路由配置保持原样 #

你的路由写法是对的，不需要修改：

<Route path="/movies/:id/" element={<Movie user={user} />} />

3. 处理控制台警告 #

控制台提示的Movie prop警告，大概率是某个DOM元素上不小心传了大写的Movie属性（比如拼写错误把movie写成了Movie），找到对应的代码改成小写或者直接移除这个属性就行。

验证效果 #

修改后访问/movies/[电影ID]，组件会正确拿到路由参数，调用API获取数据并渲染电影卡片，不会再出现空白页面。

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