在React项目中我们经常需要采用React-Router来配置我们的页面路由,React-Router 是建立在 history 之上的,常见的history路由方案有三种形式,分别是:

  1.hashHistory

  2.browserHistory

  3.createMemoryHistory

如果使用hashHistory ,访问的页面url如 example.com/#/some/path 的路由。

于是采用第二种browserHistory,但是部署到自己的服务器之后,可以正常访问,但是强制刷新页面之后报404找不到页面路径

Nginx配置方式如下

server {
server_name react.thinktxt.com;
listen 80; root /Users/txBoy/WEB-Project/React-Demo/dist;
index index.html;
location / {
try_files $uri /index.html;
}
}
访问后刷新,解决404问题

React-Router browserHistory浏览器刷新出现页面404解决方案的更多相关文章

  1. react ---- Router路由的使用和页面跳转

    React-Router的中文文档可以参照如下链接: http://react-guide.github.io/react-router-cn/docs/Introduction.html 首先,我们 ...

  2. jquery刷新iframe页面的方法

    1,reload 方法,该方法强迫浏览器刷新当前页面. 语法:location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当 ...

  3. jquery刷新iframe页面的方法(兼容主流)

    1,reload 方法,该方法强迫浏览器刷新当前页面.语法:location.reload([bForceGet])   参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取 ...

  4. JS怎么刷新当前页面

    JS怎么刷新当前页面 reload 方法,该方法强迫浏览器刷新当前页面.语法:location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从 ...

  5. JS 怎么刷新当前页面

    reload 方法,该方法强迫浏览器刷新当前页面. 语法:location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当前页 ...

  6. 解决React路由URL中hash(#)部分的显示 、browserHistory打包后浏览器刷新页面出现404的问题

    摘要 在React项目中,我们需要采用它的路由库React-Router来进行页面跳转,React会根据路由URL来判断是哪个页面.常见的的URL有两种显示方式,一种是hashHistory的形式,形 ...

  7. tomcat 部署 React 项目后,浏览器刷新报404问题

    问题:tomcat部署了react前端项目,可以正常访问,但是页面刷新就报404 一.问题截图 二.解决办法 在tomcat 配置文件web.xml中配置如下代码: web.xml 路径: apach ...

  8. React+React Router+React-Transition-Group实现页面左右滑动+滚动位置记忆

    2018年12月17日更新: 修复在qq浏览器下执行pop跳转时页面错位问题 本文的代码已封装为npm包发布:react-slide-animation-router 在React Router中,想 ...

  9. Vue 部署单页应用,刷新页面 404/502 报错

    在 Vue 项目中,可以选择 hash或者 history.pushState() 实现路由跳转.如果在路由中使用history模式: export default new Router({ mode ...

随机推荐

  1. 【探索之路】机器人篇(3)-给mwRobot建立模型

    在创建一个mwRobot_description程序包那一节中,我们添加了依赖roscpp  rospy std_msgs 和 urdf , 现在我们再添加一个xacro依赖. 如何添加依赖? 打开程 ...

  2. 新下载的Chrome 不能用,设置搜索引擎,谷歌浏览器不能用,chrome浏览器不能用,google chrome 不能用

    新下载的chrome默认搜索引擎 是google搜索,而google搜索引擎在国内是不能使用的,要设置为 百度或.360.搜狗搜索引擎才能使用. 设置方法如下: 1.打开 Chrome. 2.点击右上 ...

  3. 自定义ClassLoader的使用

    1 import java.io.ByteArrayOutputStream; 2 import java.io.File; 3 import java.io.FileInputStream; 4 i ...

  4. String StringBuffer StringBuilder之间的区别

    String:

  5. hive优化之小文件合并

    文件数目过多,会给HDFS带来压力,并且会影响处理效率,可以通过合并Map和Reduce的结果文件来消除这样的影响: set hive.merge.mapfiles = true ##在 map on ...

  6. Map遍历的几种方式

    代码示例 /** * @author liaowenhui * @date 2020/6/25 11:15 */ public class TestMap { public static void m ...

  7. 【高精度】计算2的N次方

    题目相关 [题目描述] 任意给定一个正整数N(N≤100),计算2的n次方的值. [输入] 输入一个正整数N. [输出] 输出2的N次方的值. [输入样例] 5 [输出样例] 32 分析 本题考察的是 ...

  8. JVM 源码分析(二):搭建 JDK 8 源码调试环境(Windows 上使用 CLion)

    前言 一.准备源码 二.安装 "Bootstrap JDK" 三.配置编译环境 四.编译与测试 五.安装 CMake 和 GDB 五.准备远程调试 六.开始远程调试 前言 上一篇文 ...

  9. 算法历练之路——入学考试(JAVA)

    入学考试 时间限制: 1Sec 内存限制: 128MB 提交: 42 解决: 18 题目描述辰辰是个天资聪颖的孩子,他的梦想是成为世界 上最伟大的医师.为此,他想拜附近最有威望的医师为师.医师为了判断 ...

  10. LeetCode498 对角线遍历

    给定一个含有 M x N 个元素的矩阵(M 行,N 列),请以对角线遍历的顺序返回这个矩阵中的所有元素,对角线遍历如下图所示. 示例: 输入: [ [ 1, 2, 3 ], [ 4, 5, 6 ], ...