项目中控制路由跳转使用的是BrowserRouter

在开发过程中使用是没有问题的，但是将页面上传至服务器之后，问题就来了：用户访问的资源不存在，页面是空白的。

原因：

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

经过排查怀疑是路径的问题，将BrowserRouter 改为 HashRouter之后，问题解决了~

问题分析

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

  • hashHistory
  • browserHistory
  • createMemoryHistory

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

HashRouter与BrowserRouter的异同的更多相关文章

  1. react-router v4中 HashRouter 和 BrowserRouter的使用

    遇到的问题 项目中控制路由跳转使用的是BrowserRouter,代码如下: ReactDOM.render(( <BrowserRouter> <div className=&qu ...

  2. ReactRouter中HashRouter和BrowserRouter的区别

    仅个人理解,如有不当请指正 一.从原理上 HashRouter在路径中包含了#,相当于HTML的锚点定位.(# 符号的英文叫hash,所以叫HashRouter,和散列没关系哦)) 而BrowserR ...

  3. react route使用HashRouter和BrowserRouter的区别-Content Security Policy img-src 404(Not found)

    踩坑经历 昨天看了篇关于react-route的文章,说BrowserRouter比HashRouter好一些,react也是推荐使用BrowserRouter,毕竟自己在前端方面来说,就是个小白,别 ...

  4. hashRouter and BrowserRouter

    <html><body> <div> <button class="btn" onclick="btnFun();"& ...

  5. React杂篇（1） -- 打包发布注意事项

    打包后资源路径 问题:直接打包会出现一下情况: 方式一: package.json文件下加入homepage字段 { "name": "wap-v2", &qu ...

  6. react知识总结

    用于构建用户界面的 JavaScript 库 JSX语法 style let style = { color: 'r'+'ed', fontSize: '30px' } let jsx = <d ...

  7. react 路由4 学习

    表单控件 受控表单组件 非受控的表单组件 demo:收集表单提交的数据 路由(V4) 特点:一切皆是组件 官网:https://reacttraining.com/react-router/ npm ...

  8. React Router 4.0 基本使用

    路由的概念,起初来源于服务端,就是当浏览器访问一个网站的不同页面时,服务端能够正确的返回页面的内容.当访问首页时,它能返回首页的内容,访问关于我们页面时,返回关于我们的内容.可以看到路由就是一种控制和 ...

  9. 23.react-router 路由

    箭头函数扩展: 箭头函数: functoin 函数名(参数){    函数体 } 箭头函数: 1.把function删掉 , 2.参数和{}之间加上 箭头=> 简写: 1.参数的简写:只有一个参 ...

随机推荐

  1. CentOS 7 64位更换内核安装锐速破解版

    1.更新内核 rpm -ivh http://soft.91yun.org/ISO/Linux/CentOS/kernel/kernel-3.10.0-229.1.2.el7.x86_64.rpm - ...

  2. NetLimiter网速测试小坑

    在涉及到网络下载或者上传时,需要对各种不同的网络环境进行模拟验证,这时就需要一种可以随意限制指定进程网速的软件,经过同事推荐,发现NetLimiter这款软件很不错,界面直观,可任意设置上传下载速度, ...

  3. js 去掉重复数组

    js去掉重复数组 重点一:字符串转数组  strArr.join(',') 重点二:做循环数组删除的时候,每次循环就把color[i] 去对比i之前所有数组color组合起来的字符串 比如 : i=1 ...

  4. Spring Boot 处理 REST API 错误的正确姿势

    摘要:如何正确的处理API的返回信息,让返回的错误信息提供更多的含义是一个非常值得做的功能.默认一般返回的都是难以理解的堆栈信息,然而这些信息也许对于API的客户端来说有可能并没有多大用途,并没有多大 ...

  5. Unity用代码实现Remove Missing Script

    [MenuItem("Edit/Cleanup Missing Scripts")] static void CleanupMissingScripts () { ; i < ...

  6. QT 实现QGraphicsProxyWidget对象可选择或移动（item管理实现）

    上篇博文<QT QGraphicsProxyWidget对象可选择或移动的一些tricks>介绍了实现QT QGraphicsProxyWidget对象可选择或移动的一些小的第三方技巧,但 ...

  7. Git项目协同开发学习笔记2：项目库开发协作相关命令

    之前介绍了如何用git构建项目库及其后续操作的问题,但主要还是个人的操作问题,不太涉及到项目协作方面的问题,所以来说下这块.传送门在这里(后面的可以不用看了). 1.同步 首先就式同步问题:在项目协作 ...

  8. v9定时发布的简单实现方法[支持静态生成]

    将以下代码放到 api/count.php 文件最后 的 ?>之前 //add 定时发布审核功能 $modelid = $modelid ? $modelid : intval($_GET['m ...

  9. Java计算几何图形的面积

    对于每个几何图形而言,都有一些共同的属性,如名字.面积等,而其计算面积的方法却各不相同.为了简化开发,请编写程序,定义一个超类来实现输入名字的方法,并使用抽象方法来计算面积. 思路分析: 所谓超类就是 ...

  10. iscroll5实现下拉加载更多

    1 下载最新的iscroll5,本文版本是5.1.3 2 提取iscroll-probe.js,选择这个文件的原因是我们要给iscroll扩展一个事件,需要用到probeType 属性 3 修改isc ...