在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. 基于Opencv的简单图像处理

    实验环境 本实验均在笔记本电脑完成,电脑的配置如表1所示: 系统 Windows 10 家庭版 处理器 英特尔 Core i5-6200 @ 2.30GHz 双核 主板 宏碁 Zoro_SL 内存 1 ...

  2. Ubuntu/Liinux睡眠无法唤醒解决方法:ACPI设置

    最近给笔记本换了一个固态,顺便就重装了一下系统,版本是Ubuntu 20.10.装完之后各种功能基本都是正常的,触摸板轻触单击.双指右键等功能开箱即用.但是在安装完最新的Nvidia驱动之后就出现了问 ...

  3. YGGL.sql

    (将表复制粘贴至记事本,再用source命令导入到数据库中) CREATE TABLE `departments` ( `部门编号` char(3) NOT NULL COMMENT '部门编号', ...

  4. WebSocket协议中文版

    WebSocket协议中文版 摘要 WebSocket协议实现在受控环境中运行不受信任代码的一个客户端到一个从该代码已经选择加入通信的远程主机之间的全双工通信.用于这个安全模型是通常由web浏览器使用 ...

  5. 【EXPDP/IMPDP】ORACLE数据泵导入导出案例(expdp & impdp)

    概要: 因项目需要,通常需要将生产库下的部分数据抽取并恢复到测试库上 本文主要介绍数据泵导入导出的几种情况以及错误处理 案例环境: rhel-server-6.5-x86_64 oracle 11.2 ...

  6. Kubernetes CoreDNS 状态是 CrashLoopBackOff 报错

    查看状态的时候,遇见coredns出现crashlookbackoff,首先我们来进行排错,不管是什么原因,查看coredns的详细信息,以及logs [root@k8s-master coredns ...

  7. window10系统安装

    准备工作: 一个U盘,大概8GB左右的存储,用于存放windows镜像文件与驱动精灵离线版网卡驱动以及相关的应用应用软件等. window10镜像文件(iso文件) 微PE工具软件 软件下载: 前提: ...

  8. 关于安装版JDK1.8 1.7更改多个JDK环境变量 不生效

    配置maven(apache-maven-3.3.9)时提示异常:'mvn' 不是内部或外部命令,上网查找得知 它不支持jdk1.8,所以重新安装jdk1.7,后来就出现下面的问题 现象: 当使用安装 ...

  9. 全球城市ZoneId和UTC时间偏移量的最全对照表

    前言 你好,我是A哥(YourBatman). 如你所知,现行的世界标准时间是UTC世界协调时,时区已不直接参与时间计算.但是呢,城市名称or时区是人们所能记忆和容易沟通的名词,因此我们迫切需要一个对 ...

  10. 3A限流IC,带短路保护,PW1503和PW1502

    一般说明 PW1503,PW1502是超低RDS(ON)开关,具有可编程的电流限制,以保护电源源于过电流和短路保护.它具有超温保护以及反向闭锁功能. PW1503,PW1502采用薄型(1毫米)5针薄 ...