React JS中从Router切换为HashRouter后无法获取query参数

问题成因 #

HashRouter 所有路由信息都存储在 URL 的 hash 片段（即 # 后的全部内容）中，查询参数默认会拼接在 # 之后。而浏览器原生的 window.location.search 只会读取 # 之前、以 ? 开头的查询参数部分，因此你无法通过原逻辑拿到参数。

举个例子，HashRouter 模式下的访问地址为 https://your-domain.com/#/home?circular=1 时：

• window.location.search 返回空字符串
• window.location.hash 返回 #/home?circular=1，参数实际存储在 hash 内容中

解决方案 #

方案1：手动解析 hash 中的查询参数 #

修改原参数提取逻辑，从 hash 内容中截取查询串再解析：

// 提取hash中的查询参数部分
const hashStr = window.location.hash.slice(1)
const searchStr = hashStr.includes('?') ? hashStr.split('?')[1] : ''
const params = new URLSearchParams(searchStr)

const [checkboxes, setCheckboxes] = React.useState({
  circular: Number(params.has('circular') ? params.get('circular') : 0),
})

注意你原代码中状态更新函数名写为setCheckkoxes多了一个k，如果实际代码也是这个拼写需要修正，避免状态更新异常。

方案2：使用 React Router 官方API（更推荐） #

React Router 已经自动处理了HashRouter模式下的参数解析，直接用官方提供的钩子读取即可，不用手动处理hash逻辑：

React Router v5 版本

用useLocation钩子获取处理后的location对象：

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

// 组件内部
const location = useLocation()
const params = new URLSearchParams(location.search)

const [checkboxes, setCheckboxes] = React.useState({
  circular: Number(params.has('circular') ? params.get('circular') : 0),
})

React Router v6 版本

直接用useSearchParams钩子操作查询参数：

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

// 组件内部
const [searchParams] = useSearchParams()

const [checkboxes, setCheckboxes] = React.useState({
  circular: Number(searchParams.get('circular') ?? 0),
})

如果需要在路由跳转、参数变化时同步更新状态，可以将参数解析逻辑放在useEffect中，依赖对应钩子的返回值即可。

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