React-router v7 第四章：路由传参的要点

在React生态中，路由传参是实现动态页面交互的核心能力。React Router v7通过三种参数传递方式，为开发者提供了灵活的数据通信方案。无论是电商网站的商品详情跳转，还是后台管理系统的数据筛选，路由传参都承担着组件间数据桥梁的重要角色。本章将深入解析各种传参方式的应用场景与技术细节，助您掌握现代化路由管理的精髓。

使用问号拼接参数的形式：
“`javascript
// 跳转示例
navigate(`/user?name=小满zs&age=28`)
“`
适用场景：需要分享或收藏的页面链接、搜索引擎可见的参数、非敏感数据的传递

通过useSearchParams Hook解析参数：
“`javascript
import { useSearchParams } from ‘react-router-dom’

function UserPage() {
const [searchParams] = useSearchParams()
const name = searchParams.get(‘name’)
const age = searchParams.get(‘age’)
// 业务逻辑处理…
}
“`

参数值需进行URL编码处理
复杂数据结构建议JSON序列化
参数长度需控制在浏览器限制范围内

在路由定义中声明参数占位符：
“`javascript
} />
“`

两种传参方式对比：
“`javascript
// 编程式导航
navigate(`/product/${productId}`)

// 声明式导航
查看详情
“`

使用useParams Hook获取参数：
“`javascript
import { useParams } from ‘react-router-dom’

function ProductDetail() {
const { id } = useParams()
// 参数校验与容错处理
if(!id) return
// 业务逻辑…
}
“`

参数不会暴露在URL中
支持复杂对象直接传递
页面刷新后自动丢失（需配合状态持久化）

通过state属性传递对象：
“`javascript
// 编程式导航
navigate(‘/dashboard’, {
state: {
filterType: ‘monthly’,
authLevel: 2
}
})

// 声明式导航

“`

使用useLocation Hook获取：
“`javascript
import { useLocation } from ‘react-router-dom’

function Dashboard() {
const { state } = useLocation()
const filterType = state?.filterType || ‘default’
// 业务处理…
}
“`

参数类型	优势	局限	推荐场景
Query	URL可见，便于分享	长度受限，安全性低	搜索过滤、分页参数
Params	语义明确，SEO友好	需要预定义路由	详情页ID、分类标识
State	支持复杂对象，安全性高	无法直接分享	敏感数据、临时状态