React Router DOM在Amplify Console AWS上无法正常工作 [英] React Router DOM not working correctly on Amplify Console AWS

问题描述

我已经按照他们的文档在Amplify Console上部署了react app.该站点已部署并且运行良好，我能够使用链接进行导航，但是当我尝试直接登录到任何URL时，都会重定向到配置的404页面.

I have deployed react app on Amplify Console following their documentation. The site is deployed and running fine, I am able to navigate using links but when I try to land to any url directly I get redirected to my configured 404 page.

下面是我正在使用的代码

Below is the code I am using

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

Here is the link to the app - https://master.dkf0zemoh330o.amplifyapp.com/features

推荐答案

我发现使用这些设置，如所述

I found that using these settings, as mentioned here and here.

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

i.e updating the redirect rule to these settings

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

这篇关于React Router DOM在Amplify Console AWS上无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！