遇到的问题

项目中控制路由跳转使用的是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. Autofs自动挂载探讨

    Autofs介绍: mount是用来挂载文件系统的,可以在系统启动的时候挂载也可以在系统启动后挂载.对于本地固定设 备,如硬盘可以使用mount挂载:而光盘.软盘.NFS.SMB等文件系统具有动态性, ...

  2. C++笔记-并发编程 异步任务(async)

    转自 https://www.cnblogs.com/diysoul/p/5937075.html 参考:https://zh.cppreference.com/w/cpp/thread/lock_g ...

  3. .net后台以post方式调用http接口[转]

    string strResult = ""; try { HttpWebRequest myRequest = (HttpWebRequest)WebRequest.Create( ...

  4. 机智的造假->sql给Echart提供数据

    数据要求:要求数据随着上班时间的延长要递增,要看起来像真数据 declare @key int; declare cur_rate cursor for select keyID from #t1; ...

  5. Java中,尽量相信自己,使用自己写的方法,不要使用底层提供的方法。都是坑。

    Date转LocalDate时,调用toInstant()报UnsupportedOperationException异常. https://www.jianshu.com/p/11d8ed48f7a ...

  6. 关于B树B+树的详细解释——绝对精彩

    B树是一种完全平衡树,B+树是B树的升级版,使用更多.B树和B+树存在的目的是如何提高磁盘文件的访问(如数据库)效率. 关于B树和B+树的一篇比较好的文章: https://www.cnblogs.c ...

  7. java进阶学习的一些思路

    搞 Java 的年薪 40W 是什么水平? - 乔戈里的回答 - 知乎 https://www.zhihu.com/question/31437847/answer/566852748 在知乎上看了他 ...

  8. Linux(Ubuntu)使用日记------自定义命令的使用

    Linux如何自定义自己的命令呢?修改 系统中的 ~/.bashrc 文件即可 在这个文件最后面使用alias命令重定义命令. 例如: # novel-git begin alias n.r='les ...

  9. Word Representations 词向量

    常用的词向量方法word2vec. 一.Word2vec 1.参考资料: 1.1) 总览 https://zhuanlan.zhihu.com/p/26306795 1.2) 基础篇:  深度学习wo ...

  10. springboot- logback 可切换不同环境

    在resources下新建一个logback文件夹和一个logback.xml logback.xml <?xml version="1.0" encoding=" ...