React-Router browserHistory浏览器刷新出现页面404解决方案
在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解决方案的更多相关文章
- react ---- Router路由的使用和页面跳转
React-Router的中文文档可以参照如下链接: http://react-guide.github.io/react-router-cn/docs/Introduction.html 首先,我们 ...
- jquery刷新iframe页面的方法
1,reload 方法,该方法强迫浏览器刷新当前页面. 语法:location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当 ...
- jquery刷新iframe页面的方法(兼容主流)
1,reload 方法,该方法强迫浏览器刷新当前页面.语法:location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取 ...
- JS怎么刷新当前页面
JS怎么刷新当前页面 reload 方法,该方法强迫浏览器刷新当前页面.语法:location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从 ...
- JS 怎么刷新当前页面
reload 方法,该方法强迫浏览器刷新当前页面. 语法:location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当前页 ...
- 解决React路由URL中hash(#)部分的显示 、browserHistory打包后浏览器刷新页面出现404的问题
摘要 在React项目中,我们需要采用它的路由库React-Router来进行页面跳转,React会根据路由URL来判断是哪个页面.常见的的URL有两种显示方式,一种是hashHistory的形式,形 ...
- tomcat 部署 React 项目后,浏览器刷新报404问题
问题:tomcat部署了react前端项目,可以正常访问,但是页面刷新就报404 一.问题截图 二.解决办法 在tomcat 配置文件web.xml中配置如下代码: web.xml 路径: apach ...
- React+React Router+React-Transition-Group实现页面左右滑动+滚动位置记忆
2018年12月17日更新: 修复在qq浏览器下执行pop跳转时页面错位问题 本文的代码已封装为npm包发布:react-slide-animation-router 在React Router中,想 ...
- Vue 部署单页应用,刷新页面 404/502 报错
在 Vue 项目中,可以选择 hash或者 history.pushState() 实现路由跳转.如果在路由中使用history模式: export default new Router({ mode ...
随机推荐
- win10 设置文件夹别名、修改文件夹图标、修改文件夹别名、英文目录和中文目录、设置文件夹中文名称、快捷访问显示设置中文
最近在设置文件夹的时候发现个有趣的事情: 系统路径 C:\Users\Administrator 内的文件夹不仅有图标还显示中文名称,但是打开路径的时候显示的却是英文,这就激发了我的探索欲,究竟是为 ...
- Java学习日报7.22
//3.2 逆向输出三位整数! 7.22 package 三个和尚比身高1; import java.util.Scanner; public class Demo1{ @SuppressW ...
- 【Go】四舍五入在go语言中为何如此困难
四舍五入是一个非常常见的功能,在流行语言标准库中往往存在 Round 的功能,它最少支持常用的 Round half up 算法. 而在 Go 语言中这似乎成为了难题,在 stackoverflow ...
- 使用 squid 共享 虚拟专用网至局域网
最近要出差,但是公司代码放在内网环境,平时在公司使用没问题,如果不在公司,就要拨 虚拟网络以下简称:V网. 但是公司给的 V网,并不是那种,直接用系统自带的网络连接,就可以连接上的,需要装一个软件,登 ...
- Detectron2 快速开始,使用 WebCam 测试
本文将引导快速使用 Detectron2 ,介绍用摄像头测试实时目标检测. Detectron2: https://github.com/facebookresearch/detectron2 环境准 ...
- 任意文件下载漏洞的接口URL构造分析与讨论
文件下载接口的URL构造分析与讨论 某学院的文件下载接口 http://www.****.edu.cn/item/filedown.asp?id=76749&Ext=rar&fname ...
- 【Java基础】Java9 新特性
Java9 新特性 模块化系统 Java 和相关生态在不断丰富的同时也越来越暴露出一些问题: Java 运行环境的膨胀和臃肿.每次 JVM 启动的时候,至少会 30-60MB 的内存加载,主要原因是 ...
- Flutter 布局类组件:弹性布局(Flex)
前言 弹性布局允许子组件按照一定比例来分配父容器空间,Flutter中的弹性布局主要通过Flex和Expanded来配合实现. Flex Flex组件可以沿着水平或垂直方向排列子组件,如果你知道主轴方 ...
- Rabbitmq可靠消息投递,消息确认机制
前言 我们知道,消息从发送到签收的整个过程是 Producer-->Broker/Exchange-->Broker/Queue-->Consumer,因此如果只是要保证消息的可靠投 ...
- (十三)利用BASE_DIR来import模板
实际工程的组织架构一般是这样的: bin包下的bin.py是实际的执行文件,my_mould包下的是业务逻辑的实现模板 bin.py需要import my_mould下的py文件,而bin和my_mo ...