React Router + vite + 动态路由

Question

我在使用带有动态路由路径的 vite 的 React router dom 方面遇到了困难。我希望能够使用以下路线：

'http://localhost:8000' // nothing. ignore
'http://localhost:8000/tenant' // dynamic tenant detail page
'http://localhost:8000/tenant/subscription' // dynamic subscription detail page
'http://localhost:8000/tenant/subscription/manage' // static subscription manage page

当我在开发模式下运行应用程序时，一切正常。当我运行

vite preview

时，我加载租户页面，但从未加载订阅页面。之后的静态页面也不行。请参阅下面的设置。有什么想法吗？

// main.tsx
// BrowserRouter is here b/c this app is a micro frontend, fyi
ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <BrowserRouter >
      <App />
    </BrowserRouter>
  </React.StrictMode>,
)

// App.tsx
function App() {
  return (
    <div className="app">
      <Routes>
        <Route path=":tenant" element={<TenantPage />} />
        <Route path=":tenant/:subscription" element={< SubscriptionPage />} />
        <Route path=":tenant/:subscription/manage" element={< ManageSubscriptionPage />} />
      </Routes>
    </div>
  );
}

export default App;

Answer 1

我发现了问题。在我们的 vite.config.ts 文件中，我们有

base: ''

而不是默认值

base: '/'

。