项目中控制路由跳转使用的是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. shiro+redis多次调用doReadSession方法的解决方案

    Web 项目使用shiro,针对这个问题可以重写DefaultWebSessionManager,将缓存数据存放到request中,这样可以保证每次请求(可能会多次调用doReadSession方法) ...

  2. C#实现http协议支持上传下载文件的GET、POST请求

    C#实现http协议支持上传下载文件的GET.POST请求using System; using System.Collections.Generic; using System.Text; usin ...

  3. 在Eclipse中查看Javadoc文档

    当我们需要查看JDK中类的API介绍时,通常采用的方式是直接查看离线文档或者某些网站提供的在线文档.如下图: 而本文档最终达到的效果是,不需要切换出eclipse,直接在eclipse中查看JDK的J ...

  4. Android SDK Content loader has encountered a problem” “parseSdkContent Failed ”

    昨天做了一个Android的小程序,调试的时候连接真实的手机,而不是用模拟器.今天早上打开eclipse的时候报错:“Android SDK Content loader has encountere ...

  5. Oauth2.0（四）：Implicit 授权方式

    Oauth2.0的核心机制已经总结完毕.除了核心机制,Oauth2.0 还提供了几种标准的授权流程,分别适用于不同的场景.其中一种叫做 Implicit 授权,适用于纯静态页面应用.所谓纯静态页面应用 ...

  6. 数据注解特性--NotMapped

    NotMapped特性可以应用到领域类的属性中,Code-First默认的约定,是为所有带有get,和set属性选择器的属性创建数据列.. NotManpped特性打破了这个约定,你可以使用NotMa ...

  7. Java泛型方法与数据查询

    在使用JDBC查询数据库中数据时,返回的结果是ResultSet对象,使用十分不方便.Commons DbUtils组件提供了将ResultSet转化为Bean列表的方法,但是该方法在使用时需要根据不 ...

  8. Java查看内部类信息

    Java中支持在类的内部定义类,这种类成为内部类.内部类有些像Java中的方法,可以使用访问权限限定符修饰,可以使用static修饰等.编写程序,利用Java的反射机制来查看内部类的信息. 思路分析: ...

  9. Java -- 获取MAC地址

    啦啦啦 package com.xindatai.common.util; import java.io.InputStream; import java.util.regex.Matcher; im ...

  10. SpringMVC -- 梗概--源码--贰--拦截器：Interceptor

    附:实体类 1.配置web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app versi ...