React 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 展示页面