HashRouter和BrowserRouter对比

HashRouter(基于#号的路由)

路由工作原理

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

查询参数获取

  • 如果查询参数在#号前,如https://page.1688.com/?a=1#/home,需要使用window.location.search
js 复制代码
const params = new URLSearchParams(window.location.search)
console.log(params.get('a)) 
  • 如果查询参数在#号后面,如http://page.1688.com/#/home?a=1
    可以使用useSearchParams钩子函数
js 复制代码
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都可以

js 复制代码
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。

相关推荐
Simon_He5 分钟前
一个免费的在线压缩网站超越了付费的压缩软件
前端·开源·图片资源
巴巴_羊40 分钟前
React Ref使用
前端·javascript·react.js
拾光拾趣录1 小时前
CSS常见问题深度解析与解决方案(第三波)
前端·css
徊忆羽菲1 小时前
Echarts3D柱状图-圆柱体-文字在柱体上垂直显示的实现方法
javascript·ecmascript·echarts
轻语呢喃1 小时前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端
杨进军1 小时前
React 协调器 render 阶段
前端·react.js·前端框架
中微子1 小时前
Blob 对象及 Base64 转换指南
前端
风铃喵游1 小时前
让大模型调用MCP服务变得超级简单
前端·人工智能
中微子1 小时前
智能前端实践之 shot-word demo
前端
归于尽1 小时前
智能前端小魔术,让图片开口说单词
前端·react.js