React Router Dom传参：URL拼接id与state传参的区别及最佳实践

核心差异 #

两种传参方式的本质区别是参数存储位置不同，直接决定了适用场景的差异：

• 可见性不同：URL参数直接拼接在地址栏路径中，用户可以直接看到、手动修改，分享链接时参数会被完整携带；state传参不会出现在URL上，仅存在于浏览器当前标签页的history状态中，普通用户无感知。
• 持久化能力不同：URL参数和地址强绑定，用户刷新页面、收藏地址、把链接发给其他人打开，参数都不会丢失；state传参依赖history栈存储，只要用户不是通过页面内点击导航跳转（比如手动输入地址、清空浏览器缓存、跨域跳转后返回），state就会为空，部分低版本浏览器下刷新页面也可能丢失state。
• 承载能力不同：URL参数受浏览器地址栏长度限制（单条URL一般最长支持2KB-8KB），只能传数字、短字符串这类简单基础类型值；state传参的容量上限高很多（一般为MB级），支持传递嵌套对象、数组等复杂结构数据。
• 语义价值不同：URL本身是资源定位的标识，比如/article/edit/1001天然代表编辑id为1001的文章，语义清晰，也能被搜索引擎识别；state里的内容完全不对外暴露，没有资源定位和SEO价值。

选型规则与最佳实践 #

实际开发不需要死记概念，按下面的规则选就不会出问题：

优先选URL参数的场景 #

• 页面的核心定位参数必须放URL。比如详情页的资源id、编辑页的内容id、分页列表的页码、筛选条件这类决定页面核心内容加载的参数，一律拼在URL里。要保证任何人拿到这个链接，打开都能看到和你当前一致的内容，不会出现参数丢失、页面报错的问题。
• 公开需要被搜索引擎收录的页面，所有和内容相关的参数都要放在URL中。
• 需要支持用户收藏、分享的页面，核心参数放URL。

优先选state传参的场景 #

• 传递非必需的临时交互参数时用state。比如从列表页跳详情页时，带上列表当前的滚动位置、跳转来源标识、临时的页面提示文案这类，就算参数丢了也不影响页面核心内容正常渲染，只是少了点交互体验优化的内容，这类参数就适合放state。
• 传递大体积、复杂结构的临时数据时用state。比如跳详情页时提前把列表项已经拿到的基础信息传过去，首屏可以直接渲染不用等接口返回，等接口拉到最新数据再更新，能大幅提升页面加载体验，这类数据放URL里长度不够，就适合走state。
• 不希望用户直接看到、修改的临时参数，可以放state。

通用开发注意事项 #

所有读取路由state的逻辑，必须做空值兜底。永远不要假设state一定存在，拿到state之后先判空，参数缺失时要做兼容处理（比如跳转回上一级、提示参数无效），不能直接读取state下的属性发请求，否则用户刷新页面、直接输入地址访问时会直接报错。
不要用state传递核心资源定位参数（比如资源id），这是新手最容易犯的错，上线后会出现大量刷新页面报错的问题。
URL拼接参数时如果包含特殊字符，记得用encodeURIComponent做转义，避免路由解析失败。

两种传参方式的基础代码示例（修正了原示例的模板字符串笔误）：

1. URL参数传参

// 路由配置需要对应注册路径为 /edit/:id
navigate(`/edit/${user.id}`)

// 目标页面取参
import { useParams } from 'react-router-dom'
const { id } = useParams()

2. state传参

navigate('/edit', { 
  state: {
    id: user.id,
    from: 'userList',
    scrollTop: 1240
  } 
})

// 目标页面取参，一定要加空值兜底
import { useLocation } from 'react-router-dom'
const location = useLocation()
const { id, from, scrollTop } = location.state || {}

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