React.js (Vite) 应用程序在单一存储库中返回时返回 404

Question

没关系...

错误与代码库有关（我正在使用的代码库monorepo位于vercel.json根目录中）。在vercel.js与react应用程序一起打包后，一切工作正常。

---

404问题

我有一个简单的React.js应用程序，带有wouter基于 - 的路由和Vercel部署，这让我遇到了一个小问题，我不知道解决方案。404它总是在刷新（子页面）后返回。

我的代码看起来有点像这样。

    <>
        <Route path='/' component={Intro} />
        <Route path='/dashboard' component={Dashboard} />
    </>

<Intro />我<Link />必须/dashboard将我转到哪个<Dashboard />页面。它确实可以在我的本地计算机、容器中以及基于 Linux 的部署中运行，但在vercel部署中却无法真正运行，即使我尝试通过vercel.json.

    <>
        <Route path='/' component={Intro} />
        <Route path='/dashboard' component={Dashboard} />
    </>

还尝试了替代版本rewrites，但仍然存在相同的问题。

{
    "github": {
        "silent": true
    },
    "rewrites": [
        {
            "source": "(.*)",
            "destination": "/index.html"
        }
    ]
}

此处提供的实时部署链接：pointrest-6ttd9zep8-araclx.vercel.app

注意：我也尝试使用react-router，但存在同样的问题。当应用程序托管在容器上时，存在同样的问题，但当托管在容器上或在容器内运行netlify时，则根本不存在。herokudocker

Answer 1

您可以在服务中创建简单的重写规则。就我而言，我使用 Vercel。然后你就可以找到类似的东西。

在项目根目录中创建文件 vercel.json

还有作家

{
  "rewrites": [{ "source": "/(.*)", "destination": "/" }]
}

PS：不要忘记在 vercel 中启用重写。