时间戳

首页 > 解决方案 > 在子目录中为 React 应用程序（+Router）配置 .htaccess

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

问题描述

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

当我打开示例时如何配置.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，例如，当我打开控制台时，我收到此错误：

在此处输入图像描述

我究竟做错了什么？

标签： javascriptreactjsapache.htaccessreact-router

解决方案

你是对的。

潜在问题。

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

可能的解决方案：

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

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

推荐阅读