使用 Vite 和 React Router v6 在路由頁面上獲取 404

Question

我在路由方面遇到了一點問題，我的路由按預期工作，但是有一點我無法弄清楚。

我有兩條路線：

• domain.com
• domain.com/logs

在domain.com上，我有以下標題。

<nav className="space-x-4">
          <Link to="/">
            <LinkButton btnText="Home" />
          </Link>
          <Link to="/logs">
            <LinkButton btnText="Logs" />
          </Link>
</nav>

單擊這些鏈接可以正常工作。 但是，當我在domain.com/logs上並刷新頁面時，我得到一個 404。下面是我設置路由的方式。

import Logs from './routes/Logs'

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />} />
      <Route path="/logs" element={<Logs />} />
    </Routes>
  </BrowserRouter>
)

我遇到了這個鏈接： https ://vercel.com/docs/concepts/edge-network/frequently-asked-questions#why-do-i-see-a-404-error-when-accessing-my-deployment

我是從整個目錄構建的，所以應該包括routes文件夾。

現在我不確定這是否與 Vercel 或 Vite 有關。 任何建議都會很棒。 還要注意這一點...在本地完美運行，因此必須是構建的東西。

Answer 1

當您訪問domain.com時為您的網站提供服務的 index.html 也需要在您訪問domain.com/logs時提供服務，然后您的客戶端路由將起作用。

然后，react-router 將以正確的狀態顯示您的應用程序。

可以在此處找到更多信息，描述使用客戶端路由的部署https://create-react-app.dev/docs/deployment/#serving-apps-with-client-side-routing

我不熟悉vercel，但他們可能會有一個通配符選項來為任何未解決的路線提供索引文檔。