React Router部署到Apache+PHP站点时出现404错误求助

1. 配置React Router的basename #

你的应用部署在/test-app/build/路径下，createBrowserRouter需要指定basename来匹配实际部署路径，否则路由会从站点根目录开始解析，导致路径不匹配。修改index.js：

const router = createBrowserRouter([
  { path: "/", element: <App /> },
  // 其他路由配置
], {
  basename: "/test-app/build/"
});

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

2. 修正.htaccess规则 #

当前.htaccess是将请求转发到index.html，但你的入口是index.php，需要调整规则让所有非静态资源的请求都指向index.php，确保PHP能正确加载React的入口文件：

<IfModule mod_rewrite.c>
    Options -MultiViews
    RewriteEngine On
    # 排除静态资源（css、js、图片等）
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    # 将所有请求转发到index.php
    RewriteRule ^ index.php [QSA,L]
</IfModule>

3. 调整package.json的homepage配置 #

homepage配置会影响React打包后的资源路径，确保它和实际部署路径一致，或者可以直接移除（React 16+支持自动推断）。如果保留，确保值正确：

"homepage": "/test-app/build/"

4. 验证配置 #

1. 重新执行npm run build生成最新的静态文件
2. 启动XAMPP的Apache服务，访问http://localhost/test-app/build/，测试根路径和子路由是否正常加载，不再出现404

关键原因说明 #

• createBrowserRouter默认使用根路径作为路由基准，部署在子目录时必须指定basename，否则路由解析会出错
• 原来的.htaccess规则指向index.html，但实际是通过index.php加载React应用，所以需要修改转发目标
• 静态资源路径和路由基准不一致会导致资源加载失败或路由匹配错误

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