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 ...
随机推荐
- IDEA git 切换分支
如图:打开DIEA , 在右下角找到Git分支 , 然后选择你要切换的分支 , 最后选择 Checkout
- Java学习日报7.27
笔记
- 数据湖框架选型很纠结?一文了解Apache Hudi核心优势
英文原文:https://hudi.apache.org/blog/hudi-indexing-mechanisms/ Apache Hudi使用索引来定位更删操作所在的文件组.对于Copy-On-W ...
- 【Linux】中默认文本编辑器 vim 的入门与进阶
Linux 基本操作 vim 篇 vim 简介 vim 是 Linux 上最基本的文本编辑工具,其地位像是 Windows 自带的记事本工具,还要少数的 Linux 系统自带 leafpad 编辑器, ...
- eclipse下如何查看Android源码
1.查看安卓源代码: (1)首先要先下载安装源代码,网上有很多地方都可以下,百度"安卓源代码下载就行了",这里要注意版本,比如我这里用的是4.0.3的版本,对应的是android- ...
- vue中Echarts的使用-自选效果
由于项目要求使用数据图,于是我选择了我们的Echarts用来实现效果 一:全局安装Echarts npm install echarts --save(这个安装的是最新的版本有时候回报init未定义) ...
- 【函数分享】每日PHP函数分享(2021-1-9)
implode() 将一个一维数组的值转化为字符串. string implode ( string $glue , array $pieces ) 参数描述 glue 默认为空的字符串. p ...
- JavaScript高级程序设计(第4版)知识点总结
介绍 JavaScript高级程序设计 第四版,在第三版的基础上添加了ES6相关的内容.如let.const关键字,Fetch API.工作者线程.模块.Promise 等.适合具有一定编程经验的 W ...
- 了解一下RPC,为何诞生RPC,和HTTP有什么不同?
了解一下RPC,为何诞生RPC,和HTTP有什么不同? 开篇提问 什么是RPC? 为什么需要RPC,用来解决什么问题? RPC与HTTP有什么不同? 你知道几种RPC? 认识RPC RPC:Remot ...
- C语言实现九大排序算法
C语言实现九大排序算法 直接插入排序 折半插入排序 希尔排序 冒泡排序 快速排序 直接选择排序 堆排序 归并排序 基数排序 C语言实现九大排序算法 直接插入排序 将数组分为两个部分,一个是有序部分,一 ...