nginx正确服务react-router应用

如今React应用普遍使用react-router作为路由管理,在开发端webpack自带的express服务器下运行和测试表现均正常,部署到线上的nginx服务器后,还需要对该应用在nginx的配置里作相应调整,否则浏览器将不能正常使用该应用,表现为页面不显示或页面跳转错误等异常。原因在于这些react应用在运行时会更改浏览器uri而又不真的希望服务器对这些uri去作响应,如果此时刷新浏览器,服务器当然是收到浏览器发来的uri就去寻找资源,这个uri在服务器上是没有对应资源,结果服务器因找不到资源就发送403错误标志给浏览器。所以,我们要做的调整是:浏览器在使用这个react应用期间,无论uri更改与否,服务器都发回index.html这个页面就行。实际操作就是在nginx配置文件里添加如下内容:

server {  ...location / {try_files $uri /index.html;}
}

  这种调整有个前提条件:该应用在react-route里使用的history类型为browerHistory。history总共有3种类型,如图:  官方推荐一般使用browerHistory就好。

  以上认识是使用react-router被陷坑后补习webpack打包原理和nginx重定向指令所得,不然,依旧是只知其然不知其所以然。webpack打包react应用时,如果不用任何插件来分割代码的话,结果就是一个文件而已,运行时uri的定位问题自然也是在该文件里内部处理,不同于往常服务器上静态资源的“真实文件”定位。try_files $uri /index.html是nginx重定向指令,意思是在站点查找有无浏览器发来的uri,如果没有那就发送index.html这个文件给浏览器。既然我们部署到服务器的只是打包了的文件,uri定位不到,发回index.html就是了,它知道uri就在打包文件里。

转载于:https://www.cnblogs.com/cxf520/p/6606261.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/355963.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux中服务器之间的跳转,linux之***服务器间ip隧道跳转多ip路由走向分流(系真实案例)...

本文系统Centos6.0;这里的***服务以pptpd为例;其中底层涉及到pptpdfreeradiusmysql认证;本文系真实案例;leader需求大多是这样的,节约成本还要达到所需要的效果;没办法,总的做个效果出来&#x…

使用JBoss EAP 7的HTTP / 2

就在几天前,新的JBoss EAP 7 ALPHA版本已经发布。 而且我已经写过关于如何开始使用它的博客。 一个非常有趣的部分是HTTP / 2支持,它已作为技术预览添加。 它由新的Web服务器Untertow提供。 HTTP / 2通过压缩头并在同一TCP连接上多路复用多个流来减少延迟…

linux树莓派 ssh密码,树莓派之SSH连接经验

打开SSH服务执行raspi-configsudo raspi-config选择InterfacingOptions选项,回车选择SSH,回车Windows下客户端推荐使用putty这个免费开源的SSH客户端。下载地址在红框处填入树莓派的IP地址,点击右下角的Open即可。不过,putty的默认…

Linux读取SSD的smart信息,使用smartmontools查看SSD的“秘密”信息

仍然担心看不到sm841中的温度吗?您是否仍对Toshiba Q pro看不见写入量和使用寿命值感到不安?为了查看M4 / 00的写入量,您是否仍在使用C300固件升级程序重新启动到纯DOS并麻烦地运行命令?想知道在协议级别上SSD出了什么问题吗&…

锁定机制和数据并发管理(笔记)

共享锁和排它锁 排它锁:当某一个会话正在更新某一行,为了防止其他会话修改这一行,这行会被锁定这种锁称为排他锁。被排他锁锁定的行仍然可以被其他会话读取。 共享锁:在一个表上放置共享锁的目的是为了防止其他会话获得这个表上的…

【react.js + hooks】useGuide 创建用户引导视图

有的时候用户可能对网站上的一些操作流程感到困惑,这时候我们需要为用户创建引导视图。为了插入指引而专门去更改组件的渲染函数,显然是不合逻辑的,创建指引视图应该是一种对源代码低侵入的行为,我们可以遵循某一套约定&#xff0…

使用递归算法结合数据库解析成java树形结构

使用递归算法结合数据库解析成java树形结构 1、准备表结构及对应的表数据a、表结构: create table TB_TREE ( CID NUMBER not null, CNAME VARCHAR2(50), PID NUMBER //父节点 ) b、表数据: insert into tb_tree (CID, CNAME, PID) values (1, 中国, 0);…

ug11 linux,UG11.0升级包MP02Win#Linux系统下载就上UG网

UG11.0软件又出升级包啦!抽空可以为NX升级啦,从11.0发布到现在,近三个月了,每一次版本的更新,都会带来较多功能的改善,以及对错误BUG的有效处理,下图为升级后的UG11.0软件;UG11.0升级…

akka 异常处理_使用Akka处理1000万条消息

akka 异常处理Akka演员承诺并发。 有什么更好的模拟方法,看看使用商品硬件和软件处理1000万条消息需要花费多少时间,而无需进行任何低级调整。我用Java编写了整个1000万条消息的处理过程,整个结果令我惊讶。 当我在具有i5 – 4核心&#xff0…

20155330 2016-2017-2 《Java程序设计》第五周学习总结

20155330 2016-2017-2 《Java程序设计》第五周学习总结 教材学习内容总结 学习目标 理解异常架构掌握try...catch...finally处理异常的方法会用throw,throws理解Collection和Map架构会用常见的数据结构和算法了解Lambada和泛型第八章 章节主要内容 小结 Throwwable定义了取错误…

yum安装odbc驱动linux,在CentOS上离线配置PostgreSQL ODBC数据源

一、问题提出内网的一台CentOS服务器,需配置PostgreSQL ODBC。如果可以连接Internet,此工作很容易,使用yum install自动安装相应依赖包后简单配置即可。但当置于内网环境时,事情就有些麻烦,需要事先手工下载各个依赖包…

pcie组raid linux,PCIe 4.0有多强大?组RAID 0阵列之后惊呆了

技嘉在6月16日21:00正式上市了全系列B550系列主板,B550系列主板属于AMD中端系列芯片组,能原生支持PCIe 4.0技术,而这次技嘉B550 AORUS MASTER主板更是不得了,提供了3个支持PCIe 4.0技术的M.2接口,你还可以组RAID 0阵列…

weblogic最大线程_处理Weblogic卡住的线程

weblogic最大线程定义或什么是缠线? 如果线程 在设定 的时间 内连续工作(非空闲),则WebLogic Server会将其诊断为阻塞 。 您可以通过更改在诊断出线程被阻塞之前的时间长度( Stuck Thread Max Time )&#…

步进电机的正反向旋转c语言编程,实现步进电机自动正反转程序怎么写

本文收集整理关于实现步进电机自动正反转程序怎么写的相关议题,使用内容导航快速到达。内容导航:Q1:用c语言程序实现步进电机的正反转加减速的编程内容:1、本程序用于测试4相步进电机常规驱动2、需要用跳帽或者杜邦线把信号输出端…

stax 和jaxb 关系_XML解组基准:JAXB,STAx,Woodstox

stax 和jaxb 关系介绍 上周末,我开始考虑如何以一种资源友好的方式处理大量XML数据。我要解决的主要问题是如何以块的形式处理大型XML文件,同时提供上游/下游系统,需要处理一些数据。 当然,我已经使用JAXB技术已有几年了。 使用J…

48道C语言上机题参考答案,二级C语言上机题库参考答案(已修改).doc

二级C语言上机题库参考答案(已修改).doc下载提示(请认真阅读)1.请仔细阅读文档,确保文档完整性,对于不预览、不比对内容而直接下载带来的问题本站不予受理。2.下载的文档,不会出现我们的网址水印。3、该文档所得收入(下载内容预览)归上传者、…

(原创)SpringBoot入门

本文章是SpringBoot入门的介绍在这里 我会尽量写一些细节性的东西,我用的是IDEA2016 Tomcat7 JDK1.8 Maven3.3.9 IDEA Tomcat JDK Maven的安装我就不详细了, 这里我会提到Maven的安装和如何使用阿里云的镜像,因为官网的JAR下载真的是...比乌龟还慢 先从Maven的配置开始,到官…

电脑基础c语言,C语言经验: 如何从零基础学习C语言?

C语言是面向过程的,而C 是面向对象的C和C 之间的区别:C是一种结构化语言,其重点是算法和数据结构. 在C程序设计中,首先要考虑的是如何通过过程来处理输入(或环境条件)以获得输出(或实现过程(事务)控制).C ,首先要考虑的是如何构建…

java cpu_Java High CPU故障排除指南–第1部分

java cpu本文是该系列的第1部分,它将为您提供有关如何进行故障排除和识别Java高CPU问题根本原因的综合指南。 本指南也适用于独立的Java程序,但旨在帮助涉及Java EE企业日常生产支持的个人。 它还将包括最常见的高级CPU问题列表以及高级解决方案。 生产…

android:ellipsize=end 不起作用,android:ellipsize=end 失效或者 相关的Bug

其实这文章有点傻逼。相关的问题TextView android:ellipsize“end”超出一个字符时不显示…的解决http://www.pocketdigi.com/20140122/1261.html上面我到没有遇到过。但是我遇到的更神奇。就是在使用android:ellipsize“end”正常的情况下这个属性。该textView的文本就不能加入…