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 已经做了配置

猜你喜欢

转载自www.cnblogs.com/wang715100018066/p/9838806.html
今日推荐