刷新有嵌套路由的页面时出现“404 not found”,因为Vite没有将所有路由重定向到index.html

Sim*_*ran 7 reactjs react-router vite

我可以使用 React 路由器的useNavigate钩子转到类似 的嵌套路由localhost:3000/nested/route,但是一旦重新加载,我就会收到 404 未找到错误,因为它试图localhost:3000/nested/route/index.html出于某种原因进行查找。

如何将开发中的Vite配置为具有客户端路由的SPA,以便所有请求都重定向到根index.html?

Sim*_*ran 12

base通过在 my 中添加标签来修复index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="/favicon.png" />
    <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
    <meta name="description" content="My App" />
    <title>My App</title>
    <base href="/" />
  </head>

  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <script type="module" src="src/index.tsx"></script>
    <div id="root"></div>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

  • 我能问一下你是如何得到这个解决方案的吗?这不仅没有在任何地方记录,而且从我发现的所有内容来看,Vite 默认情况下应该在“spa”模式下工作,基数设置为“/”。我遇到了同样的问题,我只是很难理解为什么 Vite 的行为就像是为“mpa”设置的。编辑:只是为了澄清,这似乎有效,但我有一些副作用,可能与此相关,也可能与此无关,并且我觉得有点不安接受这是解决此问题的正确方法:/ (2认同)