React Router子目录部署：粘贴完整路由链接出现404问题求助

问题原因 #

你遇到的404是因为React属于单页应用（SPA），所有路由逻辑都在客户端浏览器中处理。当直接在地址栏输入abc.or/certmanager/Login时，服务器会尝试在文件系统中查找certmanager/Login这个路径对应的文件或目录，但实际上你的React应用所有页面都打包在certmanager/index.html里，服务器找不到对应资源就返回404。而从abc.com/certmanager跳转时，是客户端路由在处理跳转，所以不会触发服务器的文件查找，因此能正常访问。

解决步骤 #

根据你使用的服务器类型，选择对应的配置：

1. Nginx服务器 #

修改Nginx的配置文件，在对应server块中添加以下规则：

location /certmanager {
  root /你的host目录绝对路径; # 替换成你主机上host目录的实际绝对路径
  try_files $uri $uri/ /certmanager/index.html;
}

配置完成后重启Nginx，这条规则会让所有/certmanager下的请求，在找不到对应文件时自动转发到certmanager/index.html，交给React客户端路由处理。

2. Apache服务器 #

在certmanager目录下新建.htaccess文件，写入以下内容：

RewriteEngine On
RewriteBase /certmanager/
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /certmanager/index.html [L]

确保Apache已经启用了mod_rewrite模块，之后重启Apache即可生效。

3. IIS服务器 #

在host目录下创建或修改web.config文件，添加重写规则：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="React Certmanager Routes" stopProcessing="true">
          <match url="certmanager/*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/certmanager/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

保存后重启IIS服务。

额外确认点 #

• 你的Router组件已经设置了basename='/certmanager'，这个配置是正确的，确保客户端路由能正确识别子目录。
• 注意你提到的package-lock.json中的homepage配置，实际上这个配置应该写在package.json中（package-lock.json是自动生成的锁文件，手动修改无效），确认package.json里的homepage为"https://abc.or/certmanager/"，这样打包时React会自动处理静态资源的路径。

内容的提问来源于stack exchange，提问作者thắng trương