一、前后端路由冲突的解决
在使用react-router的BrowserRouter方式进行路由构建时,遇到了二级路由刷新或者浏览器地址栏键入地址后请求404的问题,这是因为浏览器去请求了server,但这个路由在server并不存在,所以产生了这种结果。
对应的处理方案,在慢慢检索中变得明朗起来,为解决前后端路由冲突:
1、BrowserRouter,使用需要得到server的支持,就是server在收到前端路由时,重新载入入口的index.html文件;
2、HashRouter,使用HashRouter,则可以完全解决以上问题
二、理解BowserRouter与HashRouter实现路由的两种方式
1、BrowserRouter
借助history的API实现路由,指向真实的资源地址,所以在刷新后会请求server
historyAPI:pushState、replaceState,依靠popstate事件检测路由变化
2、HashRouter
使用URL中的hash(#)去创建路由,对于server来说都是指向同一个地址,刷新后浏览器并不会去请求server,也就不会存在前后端路由冲突问题。
location.hash()/replace()实现跳转,使用hashchange事件来检测路由是否发生变化
所以具体使用还要看是否需要浏览器的配合来选择路由的实现方式;
另外对于MemoryRouter,适用于非浏览器环境中,StaticRouter则适用于服务端渲染,没有用户点击;