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?

score 13 · Answer 1 · edited Jun 28 '23 at 01:35

13

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)$).)*$/>

edited Jun 28 '23 at 01:35

Hendy Irawan

20,498
11
103
114

answered Dec 03 '19 at 07:09

Trevor Wood

2,347
5
31
56

1

It works, thank you!. Is the regex matching ALL files, or only the extensions that you've specified? Also, can you please elaborate on why we need to do this? – oyalhi Dec 14 '19 at 07:42
@oyalhi not sure tbh. I read this from an aws engineer on github – Trevor Wood Dec 16 '19 at 03:01
1

I also had this problem and resolved by just changing 404 (Redirect) to 404 (Rewrite). followed this: https://github.com/aws-amplify/amplify-console/issues/59 Works at all? Someone knows the difference from this to the answer? – Pedro Frattezi Silva Feb 13 '20 at 21:48

score 5 · Answer 2 · answered Mar 20 '20 at 02:22

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

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

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

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 App not redirecting properly on AWS Amplify

3 Answers3