AWS Amplify和React使用React -router-dom给出AccessDenied

Question

我使用AWS Amplify来部署一个React应用程序。当我部署React web应用程序时，根URL按预期工作(example.com)。但是，如果您尝试访问子url(例如example.com/something)，则会给出AccessDenied错误。

我的react-router代码如下:

import { BrowserRouter, Routes, Route } from "react-router-dom";
const Router = () => {
return ( 
<React.Fragment>
<BrowserRouter>
<Routes>
<Route path="/" element={
<React.Fragment>
<Footer/>
</React.Fragment>
} />
<Route path="something" element={
<React.Fragment>
<Something/>
<Footer/>
</React.Fragment>
} />
</Routes>
</BrowserRouter>
</React.Fragment>
)
}

环顾四周，似乎你需要设置一个重定向规则，如:

[
{
"source": "</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>",
"target": "/index.html",
"status": "200",
"condition": null
}
]

当我这样做时，它确实停止给我AccessDenied错误，但是现在我的react- router -dom代码不像预期的那样工作，我只是得到一个空的index.html页面。

我已经有这个很长一段时间了，它很烦人。我不知道这是React的问题还是AWS的问题。你能告诉我正确的方向吗?

更新AWS Amplify Exports似乎有问题?当我尝试导航到web应用程序的主页时，我得到一个空白页面，然后查看控制台，我看到一个错误:"TypeError: undefined is not an object (evaluating 'l[e].call')"就是这一行:

return l[e].call(r.exports, r, r.exports, f), r.l = !0, r.exports

Answer 1

您似乎需要将<Route path="something"更改为<Route path="/something"。这可能就是你被重定向回index.html而不是你想去的实际路由的原因。

Answer 2

首先，我建议在你的路由中使用Switch来捕获页面未找到错误404

import { BrowserRouter,Switch, Routes, Route } from "react-router-dom";
const Router = () => {
return ( 
<React.Fragment>
<BrowserRouter>
<Switch>
<Routes>
<Route path="/" element={<Footer/>} />
<Route path="something" element={
<>
<Something/>
<Footer/>
</>
} />
</Routes>
</Switch>
</BrowserRouter>
</React.Fragment>
)
}

第二个更新源属性到

[
{
"source": "**",
"target": "/index.html",
"status": "200",
"condition": null
}
]

Answer 3

我总是在netflix上使用这个，我不知道它在放大上是否有效。

在package json

中修改如果使用vite"build": "vite build && echo '/* /index.html 200' | cat >dist/_redirects"

如果使用CRA"build": "react-scripts build && echo '/* /index.html 200' | cat >build/_redirects"

Answer 4

我设法修复了这个错误。似乎是React包过时了，在构建期间导致了这个错误。我刚刚升级了项目中的所有包，问题就解决了。