reactjs 为什么react-router不能在vercel上运行?

hkmswyz6  于 2023-04-11  发布在  React
关注(0)|答案(9)|浏览(204)

我正在尝试发布一个无服务器的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

mqxuamgl

mqxuamgl1#

在项目的根目录下添加一个vercel.json文件,并使用“rewrites”重写所有传入路径,使其引用索引路径。
例如:

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

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

beq87vna

beq87vna2#

指定每个路由

为了让React路由器在Vercel中工作,我必须在vercel.json文件中指定每个路由,如Surbina's answer中所述。(顺便说一句,谢谢,我使用这个解决方案很长一段时间了)

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

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

Vercel中的正则表达式匹配问题

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

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

我找到的解决方案是使用Regex匹配所有路由,除了包含点(.)的路由,这些路由通常是文件,如bundle.js。然后您可以请求像/recruit这样的URL,它会被路由到/,因为它没有点。
正则表达式是/[^.]+(在Vercel上变成^/[^.]+$)。
请注意,这是一个非常简单的正则表达式,可能无法涵盖所有情况,但是,我还没有得到任何问题,它的时刻,这篇评论。
所以我的vercel.json文件看起来像这样:

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

希望对你有用!

qoefvg9y

qoefvg9y3#

在vercel托管服务中,您可以通过在framework preset中选择create-react-app来部署整个项目:

或者,您可以在构建项目后通过运行npm run build并选择Other作为Framework预设来仅部署build文件夹:

备注

如果你在BrowserRouter中使用react-router-dom,你应该在你的项目文件夹或构建文件夹的根目录下有vercel.json文件:

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

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

wpcxdonn

wpcxdonn4#

只需将其添加到您的vercel.json中,这将把您的所有路由路由到index.html,除了js文件

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

ukdjmx9f5#

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

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

wqlqzqxt6#

听起来Vercel在错误的地方查找您的文件。我发现它们很挑剔,有时候在使用localhost时有效的东西在Vercel部署上不起作用。

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

package.json中。这通常对我有效,但如果不起作用,请尝试您的部署的实际URL,即https://something.vercel.app。对于某些设置,我不得不这样做。
如果仍然不起作用,请检查devtools中的Network选项卡并找到您的请求,并检查它实际上正在使用哪个URL查找资源。这可能会给予您一些线索。

3pmvbmvn

3pmvbmvn7#

我正在使用Create React App和react-scripts来构建项目,我遇到了类似的问题。问题是当我在vercel的部署站点上单击浏览器刷新时,子路由内容没有加载,但在本地工作正常。
例如,如果你直接去这个子路由,它会失败

https://mysite/top/second

原来问题出在我的package.json中,我有"homepage": ".",我只是通过更改"homepage": ""(删除点)来修复它
react-scripts build将读取package.jsonhomepage属性,并将homepage的值附加到链接js和css捆绑代码的所有路径。

jckbn6z7

jckbn6z78#

您还可以运行(您的生产构建),如

yarn serve build -s

-s选项将所有未找到的路径重定向到index.html,因此您甚至不需要serve.json/vercel.json文件

enyaitl3

enyaitl39#

在根目录下创建vercel.json文件并粘贴代码

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

相关问题