如何使用路由器修复反应应用程序以使用其部署的本地文件夹的基本名称？

Question

服务器上有多个文件夹，其中包含我的反应应用程序的不同版本，例如：

data/www/demo1
data/www/demo2

每个文件夹都包含从我的应用程序的 dist 文件夹复制的文件（不更改任何内容）。

我可以通过如下网址访问应用程序的每个版本：

http://服务器/demo1

当我将路由添加到我的应用程序时，这不再起作用，因为我在路由器中没有基本名称：

root.render(
  <StrictMode>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<App />} />
          <Route path="attributes" element={<Attributes />} />
          <Route path="*" element={<InfoPage />} />
        </Routes>
      </BrowserRouter>
  </StrictMode>
);

如何定义基础以便它获取应用程序文件所在的文件夹？

Answer 1

路由器在这种情况下需要一个

basename

道具。

basename

将您的应用程序配置为在特定基本名称下运行 网址：

function App() {
  return (
    <BrowserRouter basename="/app">
      <Routes>
        <Route path="/" /> {/* 👈 Renders at /app/ */}
      </Routes>
    </BrowserRouter>
  );
}

将适当的

basename

URL 路径添加到每个应用程序的路由器。

示例：

data/www/demo1

<BrowserRouter basename="/demo1">
  <Routes>
    <Route path="/" element={<App />} />                 // "/demo1/"
    <Route path="attributes" element={<Attributes />} /> // "/demo1/attributes"
    <Route path="*" element={<InfoPage />} />            // "/demo1/*"
  </Routes>
</BrowserRouter>