HashRouter与BrowserRouter的异同
项目中控制路由跳转使用的是BrowserRouter
在开发过程中使用是没有问题的,但是将页面上传至服务器之后,问题就来了:用户访问的资源不存在,页面是空白的。
原因:
在browserHistory 模式下,URL 是指向真实 URL 的资源路径,当通过真实 URL 访问网站的时候,由于路径是指向服务器的真实路径,但该路径下并没有相关资源,所以用户访问的资源不存在。
经过排查怀疑是路径的问题,将BrowserRouter 改为 HashRouter之后,问题解决了~
问题分析
首先分析下出现此问题的原因: 在React项目中我们经常需要采用React-Router来配置我们的页面路由,React-Router 是建立在 history 之上的,常见的history路由方案有三种形式,分别是:
- hashHistory
- browserHistory
- createMemoryHistory
本地开发时,使用browserHistory是没有问题的,这是因为webpack.config.js中使用 webpack-dev-server 已经做了配置
只有在泥泞的道路上才能留下脚印