react-router-dom v6使用求助：Cannot read properties of undefined (reading 'useParams')

问题原因 #

1. React Router v6 不再通过组件 props 传递match对象，所以你解构的{match}是 undefined。
2. useParams是 React Router 提供的独立钩子函数，并非match对象的方法，不能通过match.useParams调用。

修复步骤及代码 #

1. 从react-router-dom导入useParams钩子
2. 在函数组件顶层调用useParams()获取路由参数，解构出你需要的roomid
3. 确保路由配置中定义了对应的参数路由（比如path="/booking/:roomid"）

修复后的代码：

import React from 'react'
import { useParams } from 'react-router-dom'

function Bookingscreen() {
  const { roomid } = useParams();
  return (
    <div>
        <h1>Booking Page</h1>
        <h1>Room id = {roomid}</h1>
    </div>
  )
}

export default Bookingscreen

额外注意 #

• 路由参数名必须和useParams解构的名称完全一致，比如路由里写的是:roomId，就需要解构roomId
• useParams是 React 钩子，只能在函数组件的顶层作用域调用，不能放在嵌套函数、条件判断等场景中

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