React Router DOM 在 Amplify 控制台 AWS 上无法正常工作答案

【问题标题】：React Router DOM not working correctly on Amplify Console AWSReact Router DOM 在 Amplify 控制台 AWS 上无法正常工作
【发布时间】：2019-12-18 08:44:18
【问题描述】：

我已经按照他们的文档在 Amplify 控制台上部署了 react 应用程序。该站点已部署并且运行良好，我可以使用链接进行导航，但是当我尝试直接登陆任何 url 时，我会被重定向到我配置的 404 页面。

下面是我正在使用的代码

ReactDOM.render(
  <Router>
    <Route path="/" component={App} />
  </Router>,
  document.getElementById("root"),
);

这是我的路线的样子 -

<Switch>
    <Route
      exact
      path="/"
      render={(): JSX.Element => <Home auth={this.auth} />}
    />
    <Route path="/features" render={(): JSX.Element => <Features />} />
    <Route
      path="/pagenotfound"
      render={(): JSX.Element => <PageNotFound />}
    />
    <Redirect from="/**" to="/pagenotfound" />
</Switch>

这是应用程序的链接 - https://master.dkf0zemoh330o.amplifyapp.com/features

【问题讨论】：

标签： amazon-web-services create-react-app aws-amplify

【解决方案1】：

我发现使用这些设置，如提到的here 和here。

即将重定向规则更新为这些设置

Source address: </^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>
Target address: /index.html
Type: 200

【讨论】：

太棒了，谢谢 - 在我的应用程序上实现了这个，并且可以确认它按预期工作。
还将它添加到我的应用程序中，该应用程序使用 facebook 登录和 AWS cognito 重定向到 myDomain.com/userProfile，它工作正常
为什么给我502 Error？
确保您在 /index.html 中有前导斜杠，否则您将从 CloudFront 获得 502。至少这是我遇到的问题。
WTF.....我花了几个小时，这对我有用。谢谢你。我正在拔头发

【解决方案2】：

谢谢！我还要添加 |json|字符串 - 它修复了“清单：行：1，列：1，Chrome 浏览器上的语法错误”问题：

Manifest: Line: 1, column: 1, Syntax error on Chrome browser

【讨论】：

嗨弗拉德斯。你会把 |json| 放在哪里？在字符串中？
在 AWS Amplify 中转到：所有应用程序 -> MySuperCoolApp -> 应用程序设置：重写和重定向 -> 编辑。然后添加规则： [ ^[^.]+$|\.(?!(css|gif|ico|json|jpg|js|png|txt|svg|woff|ttf)$)([^.] +$)/> ] [ /index.html ] [ 200(rewrite) ] (去掉方括号)