CODEWITHSUNDEEP
reactjsamazon-web-servicesaws-amplify
Chidi Nkwocha
Chidi Nkwocha

Reputation: 379

React App not redirecting properly on AWS Amplify

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?

Upvotes: 11

Views: 7307

Answers (3)

Trevor
Trevor

Reputation: 2457

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.

Example image

If that doesn't work, try this one

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

Upvotes: 17

Daniel Olson
Daniel Olson

Reputation: 531

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

Upvotes: 1

mewc
mewc

Reputation: 1447

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

Upvotes: 5

Related Questions