React Router DOM not working correctly on Amplify Console AWS

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

    <Route path="/" component={App} />

And here is how my route looks like -

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

Here is the link to the app -

Answers 1

  • 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

    enter image description here

Related Articles