reactjs React.js(Vite)应用程序在monorepository中返回404

5ktev3wc 于 2023-05-28 发布在 React

关注(0)|答案(2)|浏览(132)

算了...
错误与代码库有关（我使用的是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的配置来解决这个问题。

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

也尝试了rewrites的替代版本，仍然存在同样的问题。

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

此处提供实时部署链接：pointrest-6ttd9zep8-araclx.vercel.app
注意：我也尝试使用react-router，但存在相同的问题。当应用程序托管在netlify上时存在相同的问题，但当托管在heroku上或在docker容器内运行时根本不存在。

reactjs

来源：https://stackoverflow.com/questions/70870735/react-js-vite-application-returns-404-on-return-in-monorepository

2条答案

按热度按时间

blmhpbnm1#

你可以在发球中创建简单的重写规则。在我的情况下，我使用Vercel。你可以找到类似的东西。
在项目根目录中创建文件vercel.json
和作家

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

P.S.：别忘了在Vercel中启用重写。

赞(0）回复(0）举报 2023-05-28

k2fxgqgv2#

TLDR
在public文件夹中添加一个空的404.html（可以将标题放在title标签中），在head部分添加此脚本

<script type="text/javascript">
  var pathSegmentsToKeep = 0;

  var l = window.location;
  l.replace(
    l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') +
    l.pathname.split('/').slice(0, 1 + pathSegmentsToKeep).join('/') + '/?/' +
    l.pathname.slice(1).split('/').slice(pathSegmentsToKeep).join('/').replace(/&/g, '~and~') +
    (l.search ? '&' + l.search.slice(1).replace(/&/g, '~and~') : '') +
    l.hash
  );
    </script>

然后将此脚本添加到index.html

<script type="text/javascript">
  (function(l) {
    if (l.search[1] === '/' ) {
      var decoded = l.search.slice(1).split('&').map(function(s) { 
        return s.replace(/~and~/g, '&')
      }).join('?');
      window.history.replaceState(null, null,
          l.pathname.slice(0, -1) + decoded + l.hash
      );
    }
  }(window.location))
    </script>

在将我的应用程序部署到www.example.com后，这对我来说非常有效render.com
要处理“真实的的”未找到响应，可以添加此路由

<Route path="*" element={<p>Page not found</p>} />

有关更多信息，请访问此存储库spa-github-pages
图片来源：@rafgraph

赞(0）回复(0）举报 2023-05-28

我来回答

reactjs React.js(Vite)应用程序在monorepository中返回404

404问题

2条答案

相关问题

热门标签

最新问答