为什么在 apache 服务器上从 index.php 提供 React 应用程序时，React 路由器显示 404 错误？

Question

我构建了一个应用程序，需要将其部署到现有的 php 站点上。问题是，当我加载应用程序时，反应路由器中断并抛出 404 错误。我已经设置了一个新的 React 应用程序和一个用于测试的本地服务器——我正在使用 xampp。当通过 index.php 从构建目录提供 index.html 时，应用程序在没有反应路由器的情况下加载得很好。添加 React 路由器后，它只显示 404 页面。有没有人有 react router 和 apache 的经验？

index.js

const router = createBrowserRouter([
  { path: "/", element: <App /> },
 
]);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

index.php

<?php
header('Content-Type: text/html; charset=utf-8');
readfile(__DIR__ . '/build/index.html');
?>

在 package.json 中：

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

.htaccess

<IfModule mod_rewrite.c>
    Options -MultiViews
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.html [QSA,L]
</IfModule>

正如我所说，如果我用应用程序替换路由器提供商，它工作正常，所以它特别是一个反应路由器问题。

Answer 1

我想通了。我需要为 createBrowserRouter 添加一个基本名称。

createBrowserRouter(routes, { basename: "/test-app" })