随时记|React-Router中的HashRouter和BrowserRouter

什么是react-router

前端路由实现方式

路由需要实现三个功能：

1. 当浏览器地址变化时，切换页面；
2. 点击浏览器后退，前进按钮，网页内容发生变化；
3. 刷新浏览器，页面加载内容对应当前路由对应的地址；

在单页面web网页中，单纯的浏览器地址改变，网页不会重载，如单纯的hash值改变，网页是不会变化的，因此我们的路由需要监听事件，并利用js实现动态改变网页。

• hash 模式：监听浏览器地址hash值变化，并执行相应的js切换。
• history 模式：利用H5 history API实现url地址改变，网页内容改变。

hash模式

使用window.location.hash 属性和window.onhashchange事件。可以监听浏览器hash值得变化，去执行相应的js切换网页

hash路由实现原理：

• hash 指的是地址中 # 号以及后面的字符。称为散列值。
• 散列值不会随请求发送到服务器端的，所以改变hash,不会重新加载界面。