遇到的问题

项目中控制路由跳转使用的是BrowserRouter,代码如下:

ReactDOM.render((
<BrowserRouter>
<div className="container">
<Route path={routePaths.INDEX} exact component={Index} />
<Route path={routePaths.CARD} component={Card} />
<Route path={routePaths.BASEINFO} component={BaseInfo} />
<Route path={routePaths.EDUINFO} component={EduInfo} />
<Route path={routePaths.FAMILYINFO} component={FamilyInfo} />
<Route path={routePaths.OTHERINFO} component={OtherInfo} />
<Route path={routePaths.DETAIL} component={Detail}/>
</div>
</BrowserRouter>
),
document.getElementById('app')
);

在开发过程中使用是没有问题的,但是将页面上传至服务器之后,问题就来了:用户访问的资源不存在,页面是空白的。 经过排查怀疑是路径的问题,将BrowserRouter 改为 HashRouter之后,问题解决了~

问题分析

首先分析下出现此问题的原因: 在React项目中我们经常需要采用React-Router来配置我们的页面路由,React-Router 是建立在 history 之上的,常见的history路由方案有三种形式,分别是:

  • hashHistory
  • browserHistory
  • createMemoryHistory

hashHistory 使用 URL 中的 hash(#)部分去创建路由,举例来说,用户访问http://www.example.com/,实际会看到的是http://www.example.com/#/。

<HashRouter>
<div className="container">
<Route path='/repos' component={Repos} />
<Route path='/about' component={About} />
</div>
</HashRouter>

上面代码中,用户访问/repos(比如http://localhost:8080/#/repos)时,加载Repos组件;访问/about(http://localhost:8080/#/about)时,加载About组件。

browserHistory 是使用 React-Router 的应用推荐的 history方案。它使用浏览器中的 History API 用于处理 URL,创建一个像example.com/list/123这样真实的 URL 。

在browserHistory 模式下,URL 是指向真实 URL 的资源路径,当通过真实 URL 访问网站的时候,由于路径是指向服务器的真实路径,但该路径下并没有相关资源,所以用户访问的资源不存在。

Memory history 不会在地址栏被操作或读取。这就解释了我们是如何实现服务器渲染的。同时它也非常适合测试和其他的渲染环境(像 React Native )。和另外两种history的一点不同是你必须创建它,这种方式便于测试。

const history = createMemoryHistory(location)

解决办法

  • 使用hashHistory

本地开发时,使用browserHistory是没有问题的,这是因为webpack.config.js中使用 webpack-dev-server 已经做了配置。

 webpackConfig.devServer = {
contentBase: path.resolve(__dirname, 'build'),
compress: true, //gzip压缩
historyApiFallback: true,
};
  • 如果要使用browserHistory的话,服务器需要进行相关路由配置,方法见 这里

参考资料:

  1. https://www.sitepoint.com/react-router-v4-complete-guide/
  2. http://react-guide.github.io/react-router-cn/docs/guides/basics/Histories.html
  3. https://www.thinktxt.com/react/2017/02/26/react-router-browserHistory-refresh-404-solution.html
  4. http://echizen.github.io/tech/2016/07-05-webpack-dev-server-react-router-config
  5. https://jaketrent.com/post/pushstate-webpack-dev-server/

最新文章

  1. JS 常用验证REG
  2. Git相关的项目
  3. 新发布GoldenGate 12c版本中的主要特性
  4. linux下挂载另一系统硬盘。
  5. HttpWebRequest多线程抓取17Track的物流信息
  6. Struts2 整合jQuery实现Ajax功能(2)
  7. HTML5 五彩圆环Loading加载动画实现教程
  8. macbook 添加快捷启动服务
  9. 逆向知识第一讲,IDA的熟悉使用
  10. eclipse编写js代码没有提示
  11. 一、PHP_OSS使用
  12. vue轮播图实现
  13. 解决css3不支持同时缩放和旋转的办法
  14. @Transactional事务几点注意
  15. Windows搭建测试RabbitMq遇到的问题
  16. error:please select android sdk
  17. 20180711-统计PDB中的蛋白质种类、膜蛋白文件个数及信息等
  18. 毒害一代Java程序猿的HttpClient
  19. html+css 百度首页练习
  20. git revert 与 git reset

热门文章

  1. vue 路由变化页面数据不刷新问题(缓存)
  2. Java多线程——中断机制
  3. wangEditor的使用
  4. Java 生态核心知识点整理
  5. 实现在线预览PDF的几种解决方案
  6. Elastic Stack-Elasticsearch介绍
  7. 轻松测试 logstash 的配置文件
  8. android_模拟器调试
  9. U盘安装CentOS系统、raid5制作以及nohup的使用
  10. ReentrantLock重入锁详解