项目中应用的场景

基于文档，react前端项目打包的时候，使用的是BrowserRouter,在前后端分离开发的过程中，该影响并没有显示出来，由于为项目的前后端都会打包到一个jar里（后端是java的同事开发的，所以同时打包的时候也合并了在一起），本来这种情况下是没有什么问题的，但是由于后端配置了哪些访问地址、接口地址能通过路由的阻拦，不正确的地址都直接重定向回首页，由于前段的路由地址又是单独配置的，刚好在被拦截的列表中，就产生了管理平台在刷新的时候，会自动返回首页的悲剧。

解决过程

这个问题大体上可以分成两种方式去解决：①由后端的同事把被拦截的路由都开放出来，不重定向回首页；②前端改用HashRouter; 第一种方式的优缺点：优点:可以全局管控前端的访问的正确性。缺点：由于项目刚搭建的时候，路由不是由后端提供的，都是前端自主定义，所以这种方法需要和后端对应好，会很麻烦。 第二种方式的优缺点：优点：解决问题。缺点：会带上一个hash字符（#）

BrowserRouter与HashRouter的使用区别 由于碰到了这个问题，所以就去着点研究了下这两个使用上的区别

BrowserRouter

使用HTML5的history API（pushState, replaceState和popState），让页面的UI与URL同步。

HashRouter

HashRouter使用的是URL的hash部分（即window.location.hash），来保持页面的UI与URL的同步。

哈希历史记录不支持location.key或location.state

两者的区别

1、URL的表现形式不一样

BrowseRouter使用HTML5的history API，保证UI界面和URL同步。HashRouter使用URL的哈希部分来保持UI和URL的同步。哈希历史记录不支持location.key和location.state

2、HashRouter不支持location.state和location.key