本文对比分析了React中BrowserRouter和HashRouter两种路由组件的特点及适用场景。BrowserRouter利用HTML5 History API实现无刷新页面切换，适合现代浏览器；HashRouter则通过URL的哈希部分实现路由，兼容性更广泛。BrowserRouter支持组件间通信，而HashRouter需手动处理。
React BrowserRouter和HashRouter的区别
BrowserRouter：h5路由（history API）
HashRouter：哈希路由
主要区别
BrowserRouter 和 HashRouter 都可以实现前端路由的功能
BrowserRouter 实现的是单页面的路由切换
HashRouter 实现的是全局路由切换
从原理上
HashRouter在路径中包含了#，相当于HTML的锚点定位。（# 符号的英文叫hash，所以叫HashRouter，和散列没关系哦））
而BrowserRouter使用的是HTML5的新特性History，没有HashRouter(锚点定位)那样通用，低版本浏览器可能不支持。
从用法上
BrowserRouter进行组件跳转时可以传递任意参数实现组件间的通信，而HashRouter不能(除非手动拼接URL字符串)，因此一般配合Redux使用，实现组件间的数据通信。
下面是利用BrowserRouter实现单页面切换
先在src下的文件下创建Router.js 在里面创建路由
然后在App.js 主文件引入路由
然后在创建几个子组件方便我们的演示效果
Home页面是展示的单页面切换的路由
About就是我们需要展示的子组件
Home.js
About.js 展示页面
看看最后的完成效果
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
