在子目录中为 React 应用程序（+Router）配置 .htaccess

Question

我有一个位于mysite.com/admin目录中的 React 应用程序。所以index.html位于mysite.com/admin/index.html. 该应用程序包含类似/admin/users或的路由/admin/tools/removeUser。

当我打开exapmle时如何配置.htaccess加载？url 本身应该保持不变以呈现必要的路由。mysite.com/admin/index.htmlmysite.com/admin/

应该说根目录下还有一个React app。这是我尝试过的：

RewriteEngine on
RewriteBase /

#for app in subdirectory
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule ^admin admin/index.html [L]

#for root app
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]

但是mysite.com/admin/tools/removeUser，例如，当我打开时，在控制台中出现此错误：

我究竟做错了什么？

Answer 1

你是对的。

潜在的问题。

在本地服务器上运行 Node JS 路由（组件是 BrowserRouter, Switch, Route ）工作正常。打开直接链接并重新加载页面正确工作。但是当部署在 web 服务器 Apache 上时，启动组件应用程序工作（因为页面不会重新加载），但是当重新加载页面时会出现 404 页面。打开直接链接包含路由应用程序的一部分时出现相同的页面404。Server Appache 需要文件 .httpaccess 中的正确设置例如，我在服务器 apache 上有两个 CMS，其中一个是 SPA。?y CMS 应该有规则，而另一个像 SPA 这样的系统应该在 .httpaccess 中有规则

可能的解决方案：

    重写引擎开启
    #for 子目录中的应用程序
    RewriteBase /admin/
    重写规则 ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-l
    重写规则 ^.*admin/.* /admin/index.html [L]
    #对于根应用
    重写基数 /
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-l
    重写规则。/index.html [L]

重要的是应用程序子目录的规则不要覆盖主应用程序的规则