React Router传props报无法读取undefined的params属性错误

这个报错是React Router v5与v6版本API混用导致的：

• React Router v6 中，Route 渲染的组件不会默认注入match/history/location这类v5版本的内置props，你在movie.js里访问props.match时拿到的是undefined，再往下读取params属性就会抛出题目中的错误
• 你在nav/index.js里直接在路由element属性中调用useParams()传给组件的写法违反React Hooks调用规则，Hooks只能在组件顶层或自定义Hook内调用，不能在路由渲染的回调位置直接执行
• 原movie.js还存在未定义movie状态、JSX闭合标签错误的隐性问题，修完参数问题后也会触发其他报错

1. 修正路由配置（nav/index.js） #

移除路由定义处错误的useParams调用，直接渲染Movie组件即可，路由参数不需要在路由层手动传递：

import { BrowserRouter as Router, Routes, Route} from "react-router-dom";
import Navbar from './navbar';
import MovieList from "../components/movie-list"
import Movie from "../components/movie"

const Nav = () => {
    return (
        <Router>
            <Navbar/>
            <Routes>
                <Route exact path={'/'} element={<MovieList/>}/>
                <Route path='/movies/:id' element={<Movie />} />
            </Routes>
        </Router>
    )
}

export default Nav;

2. 修正详情组件参数接收逻辑（movie.js） #

在组件内部调用useParams钩子获取路由参数，补全缺失的状态定义，修复JSX语法错误：

import React, { useState, useEffect } from 'react'
import MovieDataService from '../services/movie'
import { Link, useParams } from 'react-router-dom'

const Movie = (props) => {
    // 补全电影详情状态定义
    const [movie, setMovie] = useState({});
    // 从路由参数中解构id，对应路由定义里的:id占位符
    const { id } = useParams();

    // 封装电影详情请求方法
    const getMovie = async (movieId) => {
        try {
            const res = await MovieDataService.get(movieId);
            setMovie(res.data);
        } catch (err) {
            console.error("获取电影详情失败：", err);
        }
    }

    useEffect(()=>{
        getMovie(id)
    },[id]) // 仅当id更新时才会调用getMovie，避免重复触发请求

    return (
        <div>
            <div className="card-container">
                <div className='card-img'>
                    {/* 加可选链兼容初始加载时movie为空的状态 */}
                    <img src={movie?.poster + "/100px250"} alt=""/>
                </div>
                <div className="card-body">
                    <h1>{movie?.title}</h1>
                    <p>{movie?.plot}</p>
                    {props.user && <Link to={`/movies/${id}/review`}>Add Review</Link>}
                </div>
            </div>
        </div>
    )
}

export default Movie;

3. 确认列表页跳转链接（movielist.js） #

你当前列表页的Link写法完全符合要求，不需要修改：

<Link to={"/movies/"+movie._id}>View Review</Link>

点击后会自动把当前电影的_id作为路由参数拼接到路径中，和/movies/:id的路由规则完全匹配。

• 点击电影列表的「View Review」链接会正常跳转到对应电影详情页
• 详情页组件可以正确拿到路由中的电影id，触发详情请求
• 不会再出现Cannot read properties of undefined (reading 'params')的报错，电影详情内容正常渲染

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