使用 Vite 的 React 中的路由无法正常工作（构建时）

Question

在我的网站上，我有一些使用 React-Router 制作的路由，它们指向网站本身的几个不同页面。在开发模式下一切正常，但构建版本是问题发生的地方。当我将网站上传到 Netlify 进行测试时，索引页面 ( path="/" ) 工作正常，但其他页面（例如 about 页面 ( path="/about"））在刷新时会抛出 404 错误他们。我也尝试过使用不同的托管提供商，但在某些上它甚至没有加载索引页面，或者它加载了，但没有加载其他页面。

经过进一步研究和阅读 Vite 文档，我发现问题可能是我没有配置 Vite 来检查路由，但我不知道如何执行此操作（或至少正确执行）。

我还应该提到，我对 React 还很陌生，所以如果问题提出得不好，我很抱歉。

以下是 app.js 文件中路由器的代码：

function App() {
  return (
    <>
      <Suspense fallback={<RhombLoad />}>
        <Router>
          <Header />
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/storitve" element={<Storitve />} />
            <Route path="/onas" element={<Onas />} />
            <Route path="/reference" element={<Reference />} />
            <Route path="/zaposlovanje" element={<Zaposlovanje />} />
            <Route path="/kontakt" element={<Kontakt />} />
            <Route path="*" element={<ErrorPage />} />
          </Routes>
          <Footer />
        </Router>
      </Suspense>
    </>
  )
}

我尝试过重新订购路由器，但这似乎没有改变任何东西......

Answer 1

我也遇到了同样的问题，我什至在这里问过Netlify 和 React Vite：Netlify 在 Vite 和 React 站点中重新加载时说“找不到页面”，去查看此链接，第一个答案帮助了我。

这是需要做的事情。

1 -_redirects在项目根目录（而不是目录中dist）的公共文件夹中创建文件。

2 - 在文件中保留以下内容_redirects：/* /index.html 200.

3 - 现在运行构建命令并将其部署到 netlify 上。

这对我有用。