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多进程 段错误,关于段错误

一个月的时间,就为了解决一个问题,段错误运行环境:arm-linux模块:XML,为多线程,多socket的网络通信协议程序现象:XML在运行一段时间以后,出现段错误,运行的时间和出现问题…

解决checkbox与对应文字不对齐的问题

最近公司比较忙,所以一直在赶项目,很久没有更新博客了。 刚才在工作中又遇到了一个问题,下面我来分享一下吧(。・∀・)ノ゙ 问题所在我写了一个input,他的类型是checkbox&…

scala akka_使用Scala,Play和Akka连接到RabbitMQ(AMQP)

scala akka在本文中,我们将研究如何从Scala连接到RabbitMQ,以便可以从应用程序中支持AMQP协议。 在此示例中,我将使用Play Framework 2.0作为容器(有关更多信息,请参阅我在该主题上的其他文章 )在其中运行应…

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

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

POJ2503 Babelfish map或者hash_map

POJ2503 这是一道水题&#xff0c;用Map轻松AC。 不过&#xff0c;可以拿来测一下字符串散列&#xff0c; 毕竟&#xff0c;很多情况下map无法解决的映射问题需要用到字符串散列。 自己生成一个质数&#xff0c; 随便搞一下。 #include<iostream> #include<cstdio>…

使用JBoss EAP 7的HTTP / 2

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

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

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

linux嵌入式面试题合集,嵌入式linux面试题解析(一)——ARM部分二

嵌入式linux面试题解析(一)——ARM部分二1、描述一下嵌入式基于ROM的运行方式基于RAM的运行方式有什么区别。基于RAM的运行方式&#xff1a;需要把硬盘和其他介质的代码先加载到ram中&#xff0c;加载过程中一般有重定位的操作&#xff1b;基于ROM&#xff1a;没有上面的操作。…

Unity应用架构设计(1)—— MVVM 模式的设计和实施(Part 2)

MVVM回顾 经过上一篇文章的介绍&#xff0c;相信你对MVVM的设计思想有所了解。MVVM的核心思想就是解耦&#xff0c;View与ViewModel应该感受不到彼此的存在。 View只关心怎样渲染&#xff0c;而ViewModel只关心怎么处理逻辑&#xff0c;整个架构由数据进行驱动。不仅View与View…

apache camel_REST端点,可使用Apache Camel进行集成

apache camelREST是一种用于组织资源的体系结构样式&#xff0c;当应用于基于HTTP的服务时&#xff0c;REST可以构建无状态&#xff0c;分离的可伸缩服务。 HTTP方法&#xff0c;HTTP标头和mime类型都允许开发人员实现REST样式。 诸如Jersey和Fuse Services Framework&#xff…

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

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

Linux查看系统信息的一些命令及查看已安装软件包的命令

系统 # uname -a # 查看内核/操作系统/CPU信息 # head -n 1 /etc/issue # 查看操作系统版本 # cat /proc/cpuinfo # 查看CPU信息 # hostname # 查看计算机名 # lspci -tv # 列出所有PCI设备 # lsusb -tv # 列出所…

5条Java记录规则

日志记录是一个关键因素&#xff0c;在软件开发过程中应始终将其考虑在内。 当生产中发生不良情况时&#xff0c;日志文件通常是我们进行故障分析的起点。 而且&#xff0c;通常&#xff0c;它们是我们掌握的唯一信息&#xff0c;可以了解发生了什么以及问题的根本原因。 正确…

linux 离线安装中文字库,centos7 离线安装字体fontconfig

起因&#xff1a;最近做了个flowable然而linux下乱码&#xff0c;发现需要安装字体包在线&#xff1a;直接 yum -y install fontconfig&#xff1b;yum -y install ttmkfdir&#xff1b;配置下即可。拓展&#xff1a;离线所需rpm包如何获取&#xff1f;百度不好找&#xff0c;找…

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

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

linux防火墙配置说明,Linux防火墙配置命令参数说明

规则操作参数说明&#xff1a;-A&#xff1a;在所选择的链末添加一条或更多规则&#xff1b;-D&#xff1a;从所选链中删除一条或更多规则。有两种方法&#xff1a;把被删除规则指定为链中的序号(第一条序号为1)&#xff0c;或者指定为要匹配的规则&#xff1b;-R&#xff1a;从…

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

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

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

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

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

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

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

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