项目中控制路由跳转使用的是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. C# 判断两张图片是否一致，极快速

    #region 判断图片是否一致 /// <summary> /// 判断图片是否一致 /// </summary> /// <param name="img& ...

  2. 惊艳的HTML5动画特效及源码

    今天我们要来分享一些很酷的HTML5动画演示,HTML5的强大之处在于它可以利用canvas的特性来绘制很多普通网页无法完成的图形和动画,canvas就像一块超级画板,在上面不仅可以实现平面图形,而且 ...

  3. OpenGL 遮挡查询

    原文地址:http://www.linuxidc.com/Linux/2015-02/114036.htm 在一个场景中,如果有有些物体被其他物体遮住了不可见.那么我们就不需要绘制它.在复杂的场景中, ...

  4. iOS: 查看 UIView 的视图树

    在想要查看的 UIView 附近打个断点,运行,直到停在断点处,在控制台键入:po [view recursiveDescription],回车. (lldb) po [self recursiveD ...

  5. Mac下配置Oracle数据库客户端远程连接数据库服务器

    下载mac数据库客户端: 地址:http://www.oracle.com/technetwork/topics/intel-macsoft-096467.html 下载这俩个:(来源:http:// ...

  6. 决策树之Cart算法一

    Contents    1. CART算法的认识    2. CART算法的原理    3. CART算法的实现 1. CART算法的认识 Classification And Regression ...

  7. hive cst 时间转换

    select from_unixtime(unix_timestamp(r.collecttime,'EEE MMM dd HH:mm:ss zzz yyyy'),'yyyy-MM-dd HH:mm: ...

  8. spark 分析日志文件(key,value)

    Spark读取日志,统计每个service所用的平均时间 发布时间:2015-12-10 9:54:15来源:分享查询网 获取log日志,每个service以“#*#”开头.统计每个service所需 ...

  9. 设置wetty不需要账号登录便可进行命令行操作

    前一篇随笔我们将了Linux怎么安装部署Wetty服务,但是我们看到,在浏览器中输入http://127.0.0.1:3000进行访问的时候,还需要我们输入账号密码进行认证(如下图第一行所示). 但在 ...

  10. Java编程思想学习笔记——初始化与清理（二）

    成员初始化 Java尽力保证:所有变量在使用前都能得到适当的初始化. 方法的局部变量:未初始化,编译错误. void f(){ int i; // System.out.println(i);//编译 ...