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。

相关推荐
OEC小胖胖11 分钟前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水32 分钟前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐39 分钟前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06271 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台1 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿121381 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴1 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
AntBlack2 小时前
拖了五个月 ,不当韭菜体验版算是正式发布了
前端·后端·python
31535669132 小时前
一个简单的脚本,让pdf开启夜间模式
前端·后端
尘心cx2 小时前
前端-CSS-day1
前端·css