如何通过Spring Cloud Gateway将根路径/路由到React UI应用

不用修改React代码的话，只需要在Spring Cloud Gateway的路由配置里新增一条匹配所有根路径资源的路由，就能解决资源加载失败的问题。

修改后的完整配置如下：

spec:
  routes:
  # 优先处理/apppath开头的请求，重写路径后转发
  - filters:
    - RewritePath=/apppath(?<segment>/?.*), ${segment}
    predicates:
    - Path=/apppath/**
    service:
      name: my-ui-app
  # 处理根路径的首页请求
  - predicates:
    - Path=/
    service:
      name: my-ui-app
  # 处理根路径下的所有资源请求（比如/index.js、/static/**等）
  - predicates:
    - Path=/**
    service:
      name: my-ui-app

原理说明 #

• 路由匹配是按配置顺序执行的，所以把更具体的/apppath/**放在最前面，避免被后面的/**路由抢先匹配；
• 当访问http://my-domain时，首页index.html通过第二个路由返回，页面里的资源引用（比如/index.js）会触发第三个路由的/**规则，直接转发到my-ui-app服务，就能正常加载；
• 访问http://my-domain/apppath时，第一个路由会把/apppath/index.js重写为/index.js转发到服务，和之前的正常逻辑一致。

内容的提问来源于stack exchange，提问作者Vishal