React Router函数组件props为空，无法访问match对象问题求助

嘿，这问题我太熟了——你用的是react-router-dom v6，但还在沿用v5的老写法！这就是为啥你的User组件props是空对象，拿不到match的原因。

问题根源 #

在react-router-dom v5及更早版本中，路由组件会自动接收match、location、history这些props，但到了v6，官方彻底移除了这个自动注入机制，直接通过props获取这些值的方式就失效了，所以你的User组件里的props自然是空的。

快速解决方法：使用useParams()钩子 #

v6专门提供了一系列钩子来替代原来的props注入，获取URL参数用useParams()就够了，修改你的User.js代码如下：

import React from 'react'
// 导入useParams钩子
import { useParams } from 'react-router-dom'

function User(){
  // 获取URL参数
  const { name } = useParams()
  return (
    <div>
      User - {name}
    </div>
  )
}
export default User

补充说明 #

如果之后你需要用到原来的location或者跳转功能，也可以用v6对应的钩子：

• 获取location对象：useLocation()
• 页面跳转：useNavigate()

你的App.js里的路由配置是符合v6规范的，不用修改，保持path="/user/:name"这样的参数写法就可以正常传递参数。

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