ReactJS：如何读取react-router的Link传递给函数组件的参数值

常见错误说明 #

你目前的写法存在4个核心错误：

• useParams 仅能获取路由路径中定义的占位参数（你配置里的:id），无法获取查询参数和state参数
• useState 是React内置的组件状态声明钩子，和路由传参无关联，不能用来读取路由传递的state
• 函数组件不存在this指向，this.props相关写法完全不生效，仅类组件支持该写法
• react-router v6及以上版本已经移除了to对象的query配置项，该传参方式已废弃

正确取值方式（默认基于react-router v6，当前主流版本） #

1. 路由路径参数获取（对应你配置里的:id）

直接通过useParams钩子读取：

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

const ReportPage = () => {
  const { id } = useParams()
  console.log(id) // 输出路径里的1
  // 其余逻辑省略
}

注意如果是v6版本，你的Route配置需要调整为element属性写法，否则路由不会渲染组件：

<Route path="/report/:id" element={<ReportPage />} />

2. Link state参数获取（对应你的尝试1）

通过useLocation钩子读取state，你的Link传参写法无需修改：

import { useLocation } from 'react-router-dom'

const ReportPage = () => {
  const location = useLocation()
  const hello = location.state?.hello // 加可选链避免用户刷新页面后state丢失报错
  console.log(hello) // 输出Hello World
  // 其余逻辑省略
}

注意：state参数不会显示在地址栏，用户手动刷新页面后state会丢失，敏感/持久化参数不建议用该方式传递。

3. 查询参数获取（对应你的尝试2）

首先修改Link传参写法，用search字段替换已废弃的query字段：

<Link
  to={{
    pathname: "/report/1",
    search: "?query=test"
  }}
>
  Press Me
</Link>

然后通过useSearchParams钩子读取查询参数：

import { useSearchParams } from 'react-router-dom'

const ReportPage = () => {
  const [searchParams] = useSearchParams()
  const query = searchParams.get('query')
  console.log(query) // 输出test
  // 其余逻辑省略
}

完整可运行示例 #

// 路由配置
import { Routes, Route } from 'react-router-dom'
import ReportPage from './ReportPage'

function App() {
  return (
    <Routes>
      <Route path="/report/:id" element={<ReportPage />} />
    </Routes>
  )
}

// 跳转页Link示例
<Link
  to={{
    pathname: "/report/1",
    state: { hello: "Hello World" },
    search: "?query=test"
  }}
>
  跳转报告页
</Link>

// ReportPage页面代码
import { useParams, useLocation, useSearchParams } from 'react-router-dom'

const ReportPage = () => {
  const { id } = useParams()
  const location = useLocation()
  const hello = location.state?.hello
  const [searchParams] = useSearchParams()
  const query = searchParams.get('query')

  console.log('路径id：', id)
  console.log('state参数：', hello)
  console.log('查询参数：', query)

  return (
    <DashboardLayout>
      <h2> AMI Test Reports </h2>
    </DashboardLayout>
  )
}

export default ReportPage

v5版本兼容说明 #

如果你使用的是react-router v5，仅查询参数获取需要调整：不需要用useSearchParams，直接解析location.search即可，推荐搭配query-string库使用：

import qs from 'query-string'
import { useLocation } from 'react-router-dom'

const ReportPage = () => {
  const location = useLocation()
  const query = qs.parse(location.search).query
  console.log(query) // 输出test
}

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