为什么 react-router 在 vercel 上不起作用？

Question

我正在尝试将无服务器网络发布到 Vercel。我想使用 react-router，这在我的电脑上运行良好，但是当我部署它时它不起作用有人可以帮助我吗？

(我想做无服务器)

// My main code
import React from 'react'
import { BrowserRouter, Switch, Route } from 'react-router-dom'

import Main from './routes/Main'
import Tos from './routes/Tos'
import Privacy from './routes/Privacy'
import NotFound from './routes/NotFound'
import Recruit from './routes/Recruit'

const App = () => {
    return (
        <BrowserRouter>
            <Switch>
                <Route exact path = '/' component = {Main} />
                <Route exact path = '/recruit' component = {Recruit} />
                <Route exact path = '/tos' component = {Tos} />
                <Route exact path = '/privacy' component = {Privacy} />
                <Route component = {NotFound} />
            </Switch>
        </BrowserRouter>
    )
}

export default App

Answer 1

也许您需要服务器将所有请求重定向到 index.html。如果是 Apache 那么你可以使用 mod_rewrite 并且你需要这样的代码：

RewriteCond %{REQUEST_URI} !^/index\.html
RewriteCond %{DOCUMENT_ROOT}/%{REQUEST_FILENAME} !-f
RewriteRule ^/.*$ /index.html [L,PT]

Answer 2

听起来 Vercel 在错误的地方查找您的文件。检查 package.json 中的 "homepage" 字段；我发现它们很挑剔，有时使用 localhost 时有效的方法在 Vercel 部署中不起作用。如果您没有“主页”字段，请先添加

"name": "my-app",
"homepage": ".",
...

在 package.json 中。这通常对我有用，但如果不行，请尝试部署的实际 url，即 https://something.vercel.app。对于某些设置，我不得不这样做。

如果仍然不起作用，请检查开发工具中的“网络”选项卡并找到您的请求，然后检查 url 它实际上在寻找资源。这可能会给你一些线索。

Answer 3

在项目的根目录添加一个vercel.json文件，并使用“rewrites”重写所有传入路径以引用您的索引路径。

例如：

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

点击这里了解更多信息：https://vercel.com/docs/configuration#project/rewrites

Answer 4

指定每条路线

为了使 React Router 在 Vercel 中工作，我必须在 vercel.json 文件中指定每个路由，如中所述。（顺便说一句，我使用这个解决方案已经有一段时间了）

{
  "routes": [
    { "src": "/", "dest": "/" },
    { "src": "/recruit", "dest": "/" }
    { "src": "/tos", "dest": "/" }
    // ....
  ]
}

但这可能不是最佳选择，具体取决于您的应用程序有多少路由，老实说，有时我会忘记添加新路由。

Vercel 中的“全部匹配”正则表达式问题

我尝试了“匹配所有”正则表达式作为源路由 [{ "src": "/*", "dest": "/" }]，就像我以前在其他托管服务中所做的那样，但由于某些原因，Vercel 服务器对所有请求都使用此路由，即使 [{ "src": "/*", "dest": "/" }] =14=] 需要请求像 bundle.js 这样的文件，破坏了应用程序。

解决方案：匹配路由但忽略文件

我找到的解决方案是使用匹配所有路由的正则表达式，但包含点 (.) 的路由除外，这些路由通常是文件，例如 bundle.js。然后你可以请求一个 url 像 /recruit 并且它被路由到 / 因为它没有点。

正则表达式是 /[^.]+（在 Vercel 上变成 ^/[^.]+$）。

Please note that this is a very simple Regex and may not cover all cases, however, I haven't got any issues with it to the moment of this comment.

所以我的 vercel.json 文件看起来像这样：

{
  "routes": [{ "src": "/[^.]+", "dest": "/", "status": 200 }]
}

希望对你有用！

Answer 5

只需将此添加到您的 vercel.json，这会将您的所有路由路由到 index.html，js 文件

除外

{
  "routes": [
    {
      "src": "/[^.]+",
      "dest": "/"
    }
  ]
}

Answer 6

在 Vercel 托管服务中，您可以通过 selecting 框架预设中的 create-react-app 来部署整个项目：

或者您可以在通过运行 npm run build 和 select 构建项目后仅部署构建文件夹其他作为框架预设：

注意

如果你将 react-router-dom 与 BrowserRouter 一起使用，你应该在项目文件夹或构建文件夹的根目录下有 vercel.json 文件：

{
  "rewrites": [
    {
      "source": "/((?!api/.*).*)",
      "destination": "/index.html"
    }
  ]
}

此配置将防止您的 Web 应用程序在您刷新页面或打开其他路由时出现 404 错误。

希望对您有所帮助。

Answer 7

我正在使用 Create React App 和 react-scripts 构建项目，我遇到了类似的问题。问题是当我在 vercel 部署的站点上单击浏览器刷新时 sub-routes 内容没有加载，但在本地它工作正常。

例如。如果你直接去这个子路线它会失败

https://mysite/top/second

事实证明问题出在我的 package.json 我有 "homepage": "." 我只是通过更改它来修复它 "homepage": "" （删除点）

react-scripts build 将读取 package.json homepage 属性并将 homepage 中的值附加到链接 js 和 css捆绑代码。

为什么 react-router 在 vercel 上不起作用？

Why does react-router not works at vercel?

reactjs

react-router

vercel

parceljs

指定每条路线

Vercel 中的“全部匹配”正则表达式问题

解决方案：匹配路由但忽略文件