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

score 70 · Accepted Answer · edited Jun 19 '23 at 20:56

70

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:

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:

edited Jun 19 '23 at 20:56

Bjorn Hansen

329
5
12

answered Aug 11 '19 at 12:39

Yasser Shaikh

46,934
46
204
281

3

Awesome, thank you - implemented this on my app and can confirm it's working as expected. – M.W. Felker Apr 22 '20 at 23:40
1

Also added it to my app that uses facebook login and AWS cognito redirecting to myDomain.com/userProfile, and it's working fine – HardBurn Aug 22 '20 at 14:06
2

Why does this give me a `502 Error`? – Dev Yego Oct 27 '20 at 18:02
Make sure you have the leading slash in `/index.html` or you'll get a `502` from CloudFront. That's the problem I ran into at least. – BrandonLWhite Feb 26 '21 at 14:46
1

WTF..... I spent hours and this worked for me. Thank you. I was pulling my hair out – booky99 Mar 22 '21 at 01:56

score 4 · Answer 2 · answered Jan 10 '20 at 21:06

4

Thanks! I would add also |json| the string - it fixes "Manifest: Line: 1, column: 1, Syntax error on Chrome browser" problem:

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

answered Jan 10 '20 at 21:06

VladS

251
3
8

Hi VladS. Where would you put the |json| in the string? – Chris Christensen Mar 05 '20 at 16:32
In AWS Amplify go to: All apps -> MySuperCoolApp -> App settings: Rewrites and redirects -> Edit. Then add rule: [ ^[^.]+$|\.(?!(css|gif|ico|json|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/> ] [ /index.html ] [ 200(rewrite) ] (remove square brackets) – VladS Mar 05 '20 at 17:10

score 0 · Answer 3 · answered Jun 06 '23 at 01:07

If the steps above don't fully work try adding <base href="/" /> to the <head/> section of your index.html as mentioned here, sadly this took a while to find.

For a complete answer this is my final "Rewrites and redirects" opened in the text editor:

[
    {
        "source": "https://example.com",
        "target": "https://www.example.com",
        "status": "302",
        "condition": null
    },
    {
        "source": "</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json|webp|html|xml|webmanifest|mp4)$)([^.]+$)/>",
        "target": "/index.html",
        "status": "200",
        "condition": null
    },
    {
        "source": "/<*>",
        "target": "/index.html",
        "status": "404-200",
        "condition": null
    }
]

React Router DOM not working correctly on Amplify Console AWS

3 Answers3

Linked