React路由：HashRouter和BrowserRouter
作者：Kinglong
发表时间：2023-06-12 23:10
关键词：BrowserRouter 路由缓存
路由缓存问题
调试模式下，增加了路由项目，有时候访问相应路径的页面，无法成功。重新编译，重新启动服务，仍然无法访问。
解决方案：清除浏览器缓存，再访问就生效了。
React路由的使用
HashRouter：监听浏览器地址hash值变化，执行相应的js切换。
import { HashRouter } from "react-router-dom";
render(){
<Provider store={store}>
<HashRouter>
<App />
</HashRouter>
</Provider>
}
BrowserRouter：调用的是H5 history API。
import { BrowserRouter } from "react-router-dom";
render(){
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
}
路由模式说明
hash路由实现原理：
- hash 指的是地址中 # 号以及后面的字符。称为散列值。
- 监听onhashchange事件，hash改变时，通过window.location.hash来获取和设置hash值。
- location.hash值的变化直接反应在浏览器的地址栏。
- 哈希历史记录不支持location.key和location.state
history模式路由原理：
- 使用HTML5的history API（pushState, replaceState和popState），让页面的UI与URL同步。
- BrowserRouter对state没有影响，state保存在history对象中。
- 通过state的方式传值给下一个页面的时候，当到达新的页面，刷新或者后退之后再前进，BrowseRouter传递的值依然可以得到。
官方更推荐使用browserRouter。