React Router DOM 在 Amplify Console AWS 上无法正常工作

Question

我已经按照他们的文档在 Amplify 控制台上部署了 React 应用程序。该站点已部署并且运行正常，我可以使用 link 进行导航，但是当我尝试直接登陆任何 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>

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

Answer 1

我发现使用这些设置，如前所述here and here。

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

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

Answer 2

谢谢！我还要添加 |json|字符串 - 它修复了 "Manifest: Line: 1, column: 1, Syntax error on Chrome browser" 问题：

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

React Router DOM 在 Amplify Console AWS 上无法正常工作

React Router DOM not working correctly on Amplify Console AWS

amazon-web-services

create-react-app

aws-amplify