遇到的问题

项目中控制路由跳转使用的是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/

react-router v4中 HashRouter 和 BrowserRouter的使用的更多相关文章

  1. React Router V4发布

    React Router V4 正式版发布,该版本相较于前面三个版本有根本性变化,遵循 Just Component 的 API 设计理念. 本次升级的主要变更有: 声明式 Declarative 可 ...

  2. [Web 前端] React Router v4 入坑指南

    cp from : https://www.jianshu.com/p/6a45e2dfc9d9 万恶的根源 距离React Router v4 正式发布也已经过去三个月了,这周把一个React的架子 ...

  3. [React Router v4] Render Multiple Components for the Same Route

    React Router v4 allows us to render Routes as components wherever we like in our components. This ca ...

  4. [React Router v4] Conditionally Render a Route with the Switch Component

    We often want to render a Route conditionally within our application. In React Router v4, the Route ...

  5. [React Router v4] Render Catch-All Routes with the Switch Component

    There are many cases where we will need a catch-all route in our web applications. This can include ...

  6. [React Router v4] Intercept Route Changes

    If a user has entered some input, or the current Route is in a “dirty” state and we want to confirm ...

  7. [React Router v4] Redirect to Another Page

    Overriding a browser's current location without breaking the back button or causing an infinite redi ...

  8. [React Router v4] Render Nested Routes

    With React Router v4 the entire library is built as a series of React components. That means that cr ...

  9. [React Router v4] Parse Query Parameters

    React Router v4 ignores query parameters entirely. That means that it is up to you to parse them so ...

随机推荐

  1. ERROR in static/js/0.5d7325513eec31f1e291.js from UglifyJs

    今天把vue项目打包是遇到这个问题.这是在服务器上打包时报的错误,本地打包不报错!很头疼!上网查了很多,发现有很多人和我遇到类似的问题,但是都没有解决我的问题!后来灵机一动,解决问题,这就跟大家说一下 ...

  2. linux下安装nodejs及npm

    转:https://www.cnblogs.com/wuyoucao/p/7011666.html 1.下载npm包 官网下载npm安装包,https://nodejs.org/en/,左边是稳定版右 ...

  3. 慢日志查询python flask sqlalchemy慢日志记录

    engine = create_engine(ProdConfig.SQLALCHEMY_DATABASE_URI, echo=True) app = Flask(__name__) app.conf ...

  4. H5页面长按导致app崩溃问题解决

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 最近用H5页面做了个安卓的项目,但是在H5页面中长按文字内容,会导致APP崩溃掉... ...

  5. (三)Installation

    Elasticsearch requires at least Java 8. Specifically as of this writing, it is recommended that you ...

  6. Java项目的导入和导出

    在很多情况下,需要将当前的 Java工程传递给其他人继续工作, 或协同工作,或者是从其他人那里接收到传递来的Java项目, 就需要掌握 Java项目的导入和导出. 以 Hello World 为例: ...

  7. c# winform 多屏显示

    using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...

  8. Lepus搭建企业级数据库慢查询分析平台

    前言 Lepus的慢查询分析平台是独立于监控系统的模块,该功能需要使用percona-toolkit工具来采集和记录慢查询日志,并且需要部署一个我们提供的shell脚本来进行数据采集.该脚本会自动开启 ...

  9. TypeError: sequence item 1: expected str instance, int found

    Error Msg Traceback (most recent call last): File "E:/code/adva_code/my_orm.py", line 108, ...

  10. 软工+C(10): 团队项目[NABCD] - 对话式编辑

    上一篇:助教指南,持续更新... 下一篇:从命令行开始逐步培养编程能力(Java) 动机(Motivation) Eating your own dog food, also called dogfo ...