React App not redirecting properly on AWS Amplify

Question

This is my first time deploying a react app on AWS Amplify. The app works fine as a SPA, the only problem is re-directions.

For example; when a user completely signs up and gets a link to verify email, clicking on the link redirects me to mydomain.com/index.html.

Also when i try navigating to mydomain.com/sign-in (which should lead me to sign in page), it redirects me to mydomain.com/index.html.

How can i resolve this?

Answer 1

Try going to App settings->Rewrites and redirects

Add in a new rule

• Source should be </^((?!\.(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$).)*$/>
• Target address index.html
• Type 200 (Rewrite)

Here's an example of what the end result should look like.

If that doesn't work, try this one

</^((?!.(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$).)*$/>

Answer 2

You need to accept and route all files. When react builds, it runs off the index file, but react-router manipulates the path as SPA requirements have it. Paste this into your rewrites and redirects. This will generally work if you are running a standard react router webapp.

[
    {
        "source": "</^((?!\\.(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$).)*$/>",
        "target": "/index.html",
        "status": "200",
        "condition": null
    },
    {
        "source": "/<*>",
        "target": "/",
        "status": "404",
        "condition": null
    }
]