使用 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，但他们可能会有一个通配符选项来为任何未解决的路线提供索引文档。