20

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

Yasser Shaikh
  • 45,616
  • 44
  • 197
  • 276

2 Answers2

60

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

Yasser Shaikh
  • 45,616
  • 44
  • 197
  • 276
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

VladS
  • 241
  • 2
  • 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