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

nginx正确服务react-router应用相关推荐

React 折腾记 - (1) React Router V4 和antd侧边栏的正确关联及动态title的实现
前言一如既往,实战出真理. 有兴趣的可以瞧瞧,没兴趣的大佬请止步于此. 免得浪费您的时间效果图基于antd的sidebar组件封装折腾记的技术栈选型 Mobx & mobx-react ...
React 16.x折腾记 - (1) React Router V4 和antd侧边栏的正确关联及动态title的实现
前言一如既往,实战出真理,有兴趣的可以瞧瞧,没兴趣的大佬请止步于此. 效果图基于antd的sidebar组件封装折腾记的技术栈选型 Mobx & mobx-react(用起来感觉良好的状 ...
React Router 之 browserHistory
前端工程采用 SPA 模式 hashHistory , 在集成到生产环境中的时候,使用browserHistory : var his; if (isDev) {//SPAhis = hashHist ...
React Router学习
React Router教程本教程引用马伦老师的的教程 React项目的可用的路由库是React-Router,当然这也是官方支持的.它也分为: react-router 核心组件 react-ro ...
使用React Router以编程方式导航
通过react-router我可以使用Link元素来创建由react路由器本地处理的链接. 我在内部看到它调用this.context.transitionTo(...) . 我想从下拉列表中进行导航 ...
从 React Router 谈谈路由的那些事
React Router 是专为 React 设计的路由解决方案,在使用 React 来开发 SPA (单页应用)项目时,都会需要路由功能,而 React Router 应该是目前使用率最高的. Re ...
Nginx Web服务应用
Nginx("engine x")是一个开源的,支持高性能.高并发的WWW服务和代理服务软件.它还具有反向代理负载均衡功能和缓存服务功能. 1 Nginx的几个常见的重要特性 1. ...
Web服务-Nginx网页服务
Nginx网页服务 Nginx网页服务一.编译安装Nginx服务 1.关闭防火墙,将安装Apache所需软件包传到/opt目录下 2.安装依赖包 3.创建运行用户.组(Nginx 服务程序默认以 n ...
Linux实战教学笔记37：企业级Nginx Web服务优化实战（上）
一,Nginx基本安全优化 1.1 调整参数隐藏Nginx软件版本号信息一般来说,软件的漏洞都和版本有关,这个很像汽车的缺陷,同一批次的要有问题就都有问题,别的批次可能就都是好的.因此,我们应尽量隐 ...

nginx正确服务react-router应用

nginx正确服务react-router应用相关推荐

最新文章

热门文章