使用 Apache 和 React Router 处理 URL 路由答案

【问题标题】：Handling URL routing with Apache and React Router使用 Apache 和 React Router 处理 URL 路由
【发布时间】：2019-06-21 22:05:54
【问题描述】：

我有一对将在共享 Apache 主机上运行的应用程序。这些应用程序位于服务器上的一个公共目录中。每个应用程序都位于其主目录中的“构建”目录中。 client 目录应该是默认显示，而admin 应该显示在 example.com/app/admin。而且，更复杂的是，admin 使用 React Router 作为其内部路由。

这是目标的直观表示：

admin
|- build
   |- index.html (example.com/app/admin, example.com/app/admin/page1, etc.)
client
|- build
   |- index.html (example.com/app)
.htaccess

所以我需要加载目标页面，同时启用 React Router 来处理 admin 的路由。我已经尝试过我能在 .htaccess 中想到的所有 RewriteCond 和 RewriteRule 组合，但到目前为止还没有运气。我觉得我离以下规则越来越近了，但我还没有完全做到。

// .htaccess

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} !^/admin/build
RewriteRule ^admin$ admin/build [L]

RewriteCond %{REQUEST_URI} !^(/client/build|/admin)
RewriteRule ^(.*)$ client/build [L]
</IfModule>

这会在地址栏中显示 /build，并且对 /admin/(.*) 的任何请求都无法将 .css 和 .js 文件请求重定向到 build 文件夹（因此它正在寻找 /admin/static/ css/ 而不是 /admin/build/static/css），尽管它们成功加载到 /admin 的请求。

编辑：将“App1”更改为“客户端”，将“App2”更改为“管理员”；屏蔽这些没有任何意义，并且目录与页面共享名称的事实可能在某种程度上是相关的。

【问题讨论】：

您如何尝试从/admin/(.*) 加载资产？ aka，它在重定向之前尝试访问的路径是什么？ - 查看 Chrome 开发者工具中的网络选项卡并检查其中是否存在 404。
根本没有重定向这些文件，只有 404s。
但它们最初指向的路径是什么？
@Capsule 文档指向/admin/page1，.css/.js 资源指向/admin/static/...。
@Capsule 谢谢，这最终成为了关键。

标签： reactjs apache .htaccess react-router-dom

【解决方案1】：

终于解决了。最后重写如下。

<IfModule mod_rewrite.c>
RewriteEngine On

RewriteCond %{REQUEST_URI} -f
RewriteRule .* - [L]

RewriteCond %{REQUEST_URI} !^/app/admin [OR]
RewriteCond %{REQUEST_URI} ^/app/admin/build
RewriteRule .* - [S=2]
RewriteRule admin/\w*/?$ admin/build/index.html [L]
RewriteRule admin/(.+)$ admin/build/$1 [L]

RewriteCond %{REQUEST_URI} !^(?:/app/client/build|/app/admin/build)
RewriteRule ^(.*)$ client/build/$1 [L]
</IfModule>

【讨论】：