React Router v6结合hash fragment存储搜索筛选参数的实现方案咨询

核心结论 #

React Router v6 原生未提供将 hash fragment 中的查询参数自动注入useParams返回结果的能力：useParams默认仅读取路由配置path字段定义的占位参数，hash 部分仅可通过useLocation().hash拿到原始字符串。仅需做轻量封装即可实现需求，完全不需要将筛选参数拼接至路径中。

具体实现步骤 #

1. 封装 hash 参数序列化/解析工具 #

// 解析hash参数字符串为对象
const parseHashParams = (hash) => {
  if (!hash) return {}
  // 去除开头的#号
  const hashContent = hash.startsWith('#') ? hash.slice(1) : hash
  return Object.fromEntries(new URLSearchParams(hashContent))
}

// 将参数对象序列化为合法hash字符串
const stringifyHashParams = (params) => {
  const searchParams = new URLSearchParams(params)
  return `#${searchParams.toString()}`
}

2. 封装自定义 Hook 替代 useParams 读取参数 #

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

// 用法和useParams完全一致，直接返回hash中的所有参数对象
const useHashParams = () => {
  const { hash } = useLocation()
  return parseHashParams(hash)
}

在/search路由组件内直接调用const hashParams = useHashParams()即可拿到{fn: 'Bob', sn: 'Smith', expanded: '12088', active: '1'}格式的参数，参数变更时会自动触发重新渲染。

3. 跳转/生成链接用法 #

无需修改现有/search的路由定义，跳转时直接指定hash字段即可：

Link 组件写法

<Link to={{
  pathname: '/search',
  hash: stringifyHashParams({
    fn: 'Bob',
    sn: 'Smith',
    expanded: '12088',
    active: '1'
  })
}}>查看搜索结果</Link>

useNavigate 编程式跳转写法

const navigate = useNavigate()

const toSearchPage = (filterParams) => {
  navigate({
    pathname: '/search',
    hash: stringifyHashParams(filterParams)
  })
}

特性说明 #

• 完全支持深度链接：用户复制包含hash的完整URL打开即可还原所有筛选条件
• 无需调整现有路由配置，不会产生你提到的路径参数冗余问题
• hash参数变更不会触发路由组件重新挂载，仅会更新参数数据，符合搜索场景的交互需求

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