页面重载时使用useParams()无法获取对应id的技术问题咨询

引发原因 #

• 路由配置未正确声明动态参数：React Router 等路由框架要求动态路由必须在路径中添加对应占位符，如需要读取id参数，路由路径需配置为/page/:id，若未配置对应占位符，useParams()始终无法读取到参数
• 组件初始化时机早于路由参数注入：页面重载时，路由上下文的参数解析存在极短的异步耗时，组件首次执行渲染逻辑时，路由参数还未注入到上下文中，此时读取useParams()会返回空值
• 嵌套路由参数未透传：如果当前组件处于嵌套子路由中，部分路由框架默认不会把父路由的动态参数透传给子路由组件，直接调用useParams()只能读取到当前子路由声明的参数
• 生产环境路由重写规则错误：单页应用部署到Nginx、云托管平台时，若未配置全路径指向入口文件的规则，重载动态路由路径时会直接丢失路由上下文，导致参数无法读取

排查步骤 #

• 核对路由配置：确认对应页面的路由路径已经添加了和读取字段完全一致的动态参数占位符，注意参数名区分大小写
• 验证参数返回时机：在组件中添加日志分别打印初始化阶段和副作用钩子中的参数值，确认是否是初始化时为空、路由上下文更新后能正常获取：

const params = useParams()
console.log('组件初始化读取参数：', params.id)
useEffect(() => {
  console.log('useEffect中读取参数：', params.id)
}, [params])

• 区分环境复现范围：如果开发环境正常、仅生产环境出现问题，直接排查托管服务的路由重写配置是否正确

解决方案 #

• 修正路由配置：如果是嵌套路由需要读取父路由参数，React Router v6+ 可以使用useMatches()手动读取所有层级路由的参数，或者开启路由参数透传配置
• 增加参数空值判断：业务逻辑执行前先判断参数是否存在，避免空值报错：

const { id } = useParams()
useEffect(() => {
  // 参数存在再执行业务逻辑
  if (!id) return
  fetchBusinessData(id)
}, [id])

• 修正生产环境路由规则：以Nginx配置为例，添加规则将所有路径指向单页应用入口文件：

location / {
  try_files $uri $uri/ /index.html;
}

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