admin管理员组文章数量:1633788
一、前后端路由冲突的解决
在使用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则适用于服务端渲染,没有用户点击;
本文标签: 路由routerReactHashRouterBrowserRouter
版权声明:本文标题:关于react-router的HashRouter与BrowserRouter(二级路由刷新404) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1729178454a1189016.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论