React Router DOM not working correctly on Amplify Console AWS

Question

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"),
);

And here is how my route looks like -

<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>

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

Answer 1

This happens because navigating directly to a path or reloading a path requests that path on the server, but React Router can only control routes on the client.

I was able to work around that limitation with Amplify using redirect settings, as mentioned in these two GitHub issues:

• Amplify Console 200 (Rewrite) fails on SPA React (Router) Application #2498
• Amplify console is not building my react frontend code correctly ? #1326.

From the Amplify console, you can access the Rewrites and redirects menu item in left sidebar. From there you can update the redirect rule to these settings:

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

This uses their regex source feature that matches problematic routes and redirects them to index.html. You may need to replace this default route with / or something else depending on how your app is structured. Here's what it should look like: