404 rewrite not working for SPAs like React

[Narrator]

Before opening, please confirm:

• [X] I have checked to see if my question is addressed in the FAQ.
• [X] I have searched for duplicate or closed issues.
• [X] I have read the guide for submitting bug reports.
• [X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

App Id

d31a6aysrans3d

Region

us-east-1

Amplify Console feature

Redirects

Describe the bug

Setting up a 404 rewrite via Amplify for SPAs like React, is not working. Instead of sending a HTTP status code of 404, a 200 is returned after the redirect.

Expected behavior

404 rewrite should send the 404 status code instead of 200

Reproduction steps

1. Setup 404 rewrite on Amplify with source: /not-found and target: /error.html
2. Setup a catch-all route in React that does a redirect: window.location.href = "/not-found";

Basically, when React sees any route that is not already defined, it will redirect the user to /not-found. This request will come to Amplify distribution, where we will rewrite the HTTP status to 404 and send the user back to /error.html.

First, set this up as the Rewrite rules on Amplify:

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

Then, create NotFoundRedirect function:

const NotFoundRedirect = () => {
  window.location.href = "/not-found";
};

export default NotFoundRedirect;

Then, add these routes in App.js:

<Route component={NotFoundRedirect} />

Here's the full implementation in my Github repo: https://github.com/Narrator/reactRoutesAmplify

---

Build Settings

No response

Additional information

No response

[github-actions[bot]]

Hi :wave:, thanks for opening! While we look into this...

If this issue is related to custom domains, be sure to check the custom domains troubleshooting guide to see if that helps. Also, there is a more general troubleshooting FAQ that may be helpful for other questions.

Lastly, please make sure you've specified the App ID and Region in the issue!

[scolestock]

Would love to see this issue resolved - we're dealing with this exact situation.

[ghost]

Hi @scolestock thank you for commenting, this issue has been reproduced and we will be prioritizing this bug. We will update this issue once it's been fixed. Thank you!

[tatethurston]

I noticed that to rewrite the full resource path must be included. For me, this meant:

This would not work:

Source address	Target address	Type
/<*>	/not-found/	404 (Rewrite)

This would work:

Source address	Target address	Type
/<*>	/not-found/index.html	404 (Rewrite)

Because though my not found page was accessible at /not-found/ the asset in S3 is /not-found/index.html.

[denizdogan]

@hloriana Any news on this? It's a pretty big deal.

[andreadeluisi-ryte]

Any news here?

[ranjanprithvi]

This worked for me:

Source address	Target address	Type
/<*>	/	404 (Rewrite)