React中直接访问index.html路径失效？子目录访问异常排查

这个问题大概率是React路由的base路径配置和**.htaccess的重写/重定向规则**共同导致的，下面分两部分给出具体修复步骤：

一、检查React路由配置 #

如果使用的是React Router（v6+），必须在根路由组件中明确设置basename属性，匹配部署的子目录路径：

import { BrowserRouter } from 'react-router-dom';

ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter basename="/test">
    {/* 你的路由组件 */}
  </BrowserRouter>
);

• 确保所有路由跳转都使用<Link>组件，而非硬编码URL，避免路径不匹配。
• 若使用v5版本，配置逻辑一致：BrowserRouter basename="/test"

二、修正.htaccess配置 #

需要同时处理非www到www的统一重定向和子目录下的SPA路由重写，避免直接暴露index.html导致错误。将根目录的.htaccess替换为以下内容：

# 强制跳转到www域名
RewriteEngine On
RewriteCond %{HTTP_HOST} ^domain\.com$ [NC]
RewriteRule ^(.*)$ https://www.domain.com/$1 [L,R=301]

# 子目录/test下的SPA路由重写
RewriteCond %{REQUEST_URI} ^/test/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^test/(.*)$ /test/index.html [L]

• 第一部分规则会把所有domain.com的请求强制跳转到www.domain.com，保证域名一致性，从根源消除两种域名路径的差异问题。
• 第二部分规则确保/test下的所有非文件/非目录请求，都转发到/test/index.html，让React Router处理路由，而非直接暴露index.html引发错误页。

额外检查项 #

• 确保React项目打包时，package.json里的homepage字段设置为"/test"，这样打包后的静态资源路径会自动带上子目录前缀：

{
  "homepage": "/test"
}

• 清除浏览器缓存后再测试，避免旧的重定向规则或静态资源缓存影响结果。

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