为什么 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

指定每条路线

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

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

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

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

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

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

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

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

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

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

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

我希望它对你有用！

Answer 2

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

例如：

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

在此处查看更多信息：https : //vercel.com/docs/configuration#project/rewrites