HashRouter和BrowserRouter对比

HashRouter(基于#号的路由)

路由工作原理

• #号后的内容不会被浏览器发送给服务器，前端路由控制页面跳转

查询参数获取

• 如果查询参数在#号前，如https://page.1688.com/?a=1#/home，需要使用window.location.search

const params = new URLSearchParams(window.location.search)
console.log(params.get('a)) 

• 如果查询参数在#号后面，如http://page.1688.com/#/home?a=1
  可以使用useSearchParams钩子函数

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

const [searchParams] = useSearchParams();
console.log(searchParams.get('a')); // ✅ 解析 a

BrowserRouter(基于HTML5 History API 的路由)

路由工作原理

• 依赖浏览器的History API（pushState / replaceState）
• 更优雅，SEO友好，但是如果后端未配置，会导致刷新404

查询参数获取

直接使用useSearchParams或者使用window.location.search都可以

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

const [searchParams] = useSearchParams();
console.log(searchParams.get('a')); // ✅ 解析 a

const params = new URLSearchParams(window.location.search);
console.log(params.get('a')); // ✅ 解析 a

结论

1. 如果是 HashRouter

   • 查询参数在 # 号前 → 用 window.location.search 解析

   • 查询参数在 # 号后 → 用 useSearchParams() 或手动解析 window.location.hash

   • 推荐 修改跳转 URL，使查询参数放在 #/home?a=1 位置，方便 useSearchParams 解析。

2. 如果是 BrowserRouter

   • 直接用 useSearchParams() 或 window.location.search 解析，无需特殊处理。

   • 需要后端支持 URL 解析，否则刷新可能会 404。