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

【问题标题】：Why does react-router not works at vercel?为什么 react-router 在 vercel 上不起作用？
【发布时间】：2021-02-25 02:42:49
【问题描述】：

我正在尝试将无服务器 Web 发布到 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

【问题讨论】：

标签： reactjs react-router vercel parceljs

【解决方案1】：

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

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

【讨论】：

我想在没有服务器的情况下这样做
你应该改变你的问题，@kiki7000
好的编辑了问题

【解决方案2】：

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

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

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

如果这仍然不起作用，请检查 devtools 中的“网络”选项卡并找到您的请求，然后检查它实际使用哪个 url 来查找资源。这可能会给你一些线索。

【讨论】：

【解决方案3】：

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

例如：

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

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

【讨论】：

我将 vercel.json 放在应用程序所在的位置，但它必须位于 repo 根目录中 ?

【解决方案4】：

指定每条路线

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

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

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

Vercel 中的“匹配所有”正则表达式问题

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

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

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

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

请注意，这是一个非常简单的正则表达式，可能无法涵盖所有情况，但是，到目前为止，我还没有遇到任何问题。

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

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

希望对你有用！

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

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

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

注意

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

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

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

希望对你有所帮助。

【讨论】：