nginx 适配react-router browserRoute 路由问题

codeGoogle 发布于2019-08-26 10:58 / 1855人阅读

摘要：适配路由问题绝对能用的一篇配置，文末直接有文件，伸手党直接拿走本文环境比较复杂，首先两层转发，并且访问路径也不是根路径。不对做编码，因此请求为，可以被规则匹配到注意是空格。配置错误解决优先级问题后，问题依然存在。导致找不到请求。

nginx 适配react-routerbrowserRoute 路由问题

绝对能用的一篇nginx配置，文末直接有文件，伸手党直接拿走

本文环境比较复杂，首先两层nginx转发，并且访问路径也不是根路径。加上对nginx一知半解，各路搜索一看，全程懵逼。最终没有一个能用的。最后还是靠同事帮助，文档大法结束加班。本文知识点：location优先级，nginx资源文件寻找方式，rewrite 重定向问题。

location 优先级

= 开头表示精确匹配

^~ 开头表示uri以某个常规字符串开头，理解为匹配 url路径即可。nginx不对url做编码，因此请求为/static/20%/aa，可以被规则^~ /static/ /aa匹配到（注意是空格）。以xx开头

~ 开头表示区分大小写的正则匹配以xx结尾

~* 开头表示不区分大小写的正则匹配以xx结尾

!~和!~*分别为区分大小写不匹配及不区分大小写不匹配的正则

/ 通用匹配，任何请求都会匹配到。

try_file 使用

当用户请求 http://localhost/example 时，这里的 $uri 就是 /example。
try_files 会到硬盘里尝试找这个文件。如果存在名为 /$root/example（其中 $root 是项目代码安装目录）的文件，就直接把这个文件的内容发送给用户。
显然，目录中没有叫 example 的文件。然后就看 $uri/，增加了一个 /，也就是看有没有名为 /$root/example/ 的目录。
又找不到，就会 fall back 到 try_files 的最后一个选项 /index.php，发起一个内部 “子请求”，也就是相当于 nginx 发起一个 HTTP 请求到 http://localhost/index.php。

适配react-router browserrouter配置

首先文件存放路径是子目录 /usr/local/services/app_logical_server-1.0/bin/app/screen
访问路径是 https://example.com/app/screen/

错误的nginx 配置

    server {
        listen       8080;
        root  /usr/local/services/app_logical_server-1.0/bin/app/screen;
        location ~* .(gif|jpg|png|js|css)$ {
          root /usr/local/services/app_logical_server-1.0/bin/app/screen/;
        }
        location ^~ /app/screen {
          root   html;
          index  index.html;
          try_files $uri $uri/ /index.html;
        }

    }

错误点

错误现象是index.html可以找到，但是index.html中的js写的是相对路径，导致所有的静态资源文件也进入了第二个location，导致页面白屏。
分析如下。

1.优先级问题

首先匹配 =，其次匹配^~, 其次是按文件中顺序的正则匹配，最后是交给 / 通用匹配。当有匹配成功时候，停止匹配，按当前匹配规则处理请求。
~* 的优先级低于 ^~所以第一个配置静态资源文件虽然写在前面，还是不会进去的。

2. server root 配置错误

解决优先级问题后，问题依然存在。原因就是这个。root 在server和location中都有，都是配置文件开始寻找的根路径，如果url是https://xxxx:8084/app/screen，location中的配置优先级高于server。首先会进入第二个location中,寻找文件，文件路径是root和域名后面的路径的拼接，例如：访问路径是 https://example.com/app/screen/umi.js，server root 为 /usr/local/services/app_logical_server-1.0/bin/app/screen。 nginx寻找文件的地址为/usr/local/services/app_logical_server-1.0/bin/app/screen/app/screen/umi.js.当然找不到，报404错误。

正确的配置

    server {
        listen       8084;
        root  /usr/local/services/app_logical_server-1.0/bin/;
        location ~* .(gif|jpg|png|js|css)$ {
            root  /usr/local/services/app_logical_server-1.0/bin;
        }
        location ~* /app/screen {
          #try_files $uri $uri/ /usr/local/services/app_logical_server-1.0/bin/app/screen/index.html;
          root  /usr/local/services/app_logical_server-1.0/bin;
          try_files /app/screen/index.html =404;
        }
    }

不带/的url重定向问题

当前配置还有个问题，就是末尾不带斜杠时，index.html可以加载到，但是html中的资源文件写的相对路径，当url 为https://example/app/screen时，相对路径为https://example/app，以js为例，https://example/app/umi.js,所以报404错误。
解决方案为，利用location优先级，再加一个 = /app/screen 的location 。

    location = /sa/screen {
        rewrite ^([^.]*[^/])$ $1/ permanent;
        port_in_redirect off;
    }

但是到此还没结束。因为业务需要，本层nginx前面还有一层Nginx。所以301 重定向的时候，会带上端口号。导致找不到请求。port_in_redirect off; 配置可以解决此问题

最终版完美配置

server {
        listen       8084;
        root  /usr/local/services/app_logical_server-1.0/bin/;
        location = /sa/screen {
            rewrite ^([^.]*[^/])$ $1/ permanent;
            port_in_redirect off;
        }
        location ~* .(gif|jpg|png|js|css)$ {
            root  /usr/local/services/app_logical_server-1.0/bin;
        }
        location ~* /app/screen {
          #try_files $uri $uri/ /usr/local/services/app_logical_server-1.0/bin/app/screen/index.html;
          root  /usr/local/services/app_logical_server-1.0/bin;
          try_files /app/screen/index.html =404;
        }
    }

私有云云服务器适配问题 ios10的适配问题 browserRoute react-router

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106915.html

项目实践：从react-router v3迁移到v4

摘要：详见对绑定监听事件，把的改变同步到的中用来把的更新同步到中。代码分割版本通过和实现代码分割和动态路由。笔者认为，更符合的组件思想，于是做了一个实践。原文：https://github.com/YutHelloWo... 前言今年3月初发布了react-router v4，相较之前的v3和v2版本做了一个破坏性的升级。遵循一切皆React Component的理念。静态路由变成了动态...

zhangrxiang 2019-08-20 18:36 评论0 收藏0
[ 一起学React系列 -- 11 ] React-Router4 (1)

摘要：中的包中的包主要有三个和。的理念上面提到的理念是一切皆组件以下统一称组件。从这点来说的确方便了不少，也迎合一切皆组件的理念。组件是中主要的组成单位，可以认为是或的路由入口。将该标示为严格匹配路由。的属性追加一条。 2019年不知不觉已经过去19天了，有没有给自己做个总结？有没有给明年做个计划？当然笔者已经做好了明年的工作、学习计划；同时也包括该系列博客剩下的博文计划，目前还剩4篇：分别...

tinysun1234 2019-08-23 14:49 评论0 收藏0
react-router v5.x 源码分析和理解 SPA router 的原理

摘要：一般情况下，都是作为等其他子路由的上层路由，使用了，接收一个属性，传递给消费子组件。创建对象，兼容老浏览器，其他和没有大区别总结分为四个包，分别为，其中是浏览器相关，是相关，是核心也是共同部分，是一些配置相关。这篇文章主要讲的是分析 react-router 源码，版本是 v5.x，以及 SPA 路由实现的原理。文章首发地址单页面应用都用到了路由 router，目前来看实现路由有...

Harriet666 2019-08-23 18:37 评论0 收藏0
React-router v4 路由配置方法

摘要：使用了约等于才能匹配或者能匹配，所以说是约等于。使用了和才能匹配后续补充这是版本中新添加，主要用来做唯一匹配的功能。就是想要在众多路由中只匹配其中一个路由。 React-Router v4 一. Switch 、Router 、Route三者的区别 1、Route Route 是建立location 和 ui的最直接联系 2、Router react-router v4 中，Route...

Coding01 2019-08-20 18:30 评论0 收藏0
Router入门0x204: react-route简单栗子

摘要：概述这一章仔细讲一讲的使用栗子简单使用源码简单使用首页文章我的首页文章我的效果带导航激活效果源码带导航效果首页文章我的首页文章我的效果说明增强版，如果当前路由命中，将会启用或者。 0x000 概述这一章仔细讲一讲 react-route 的使用栗子 0x001 简单使用源码 import React from react import ReactDom from react-d...

番茄西红柿 2019-08-23 12:16 评论0 收藏0