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
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
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With