CODEWITHSUNDEEP
reactjsrouteshttp-status-code-404aws-amplify
foO
foO

Reputation: 23

AWS Amplify React App Deployment giving false 404 in console when refreshing paging

I am testing a deployment of a Web App on AWS Amplify and am getting a false 404 reply in console even though the page is showing correctly when you trigger a refresh from the browser.

Format for all routes show absolute path such as /services/ <NavLink to='/services/'><li className='p-2 hover:text-blue-500'>Services</li></NavLink>

when page loads for the first time the url shows https://main.d1ccz03uoktudf.amplifyapp.com/services/ and the is no 404 error in console, however if you refresh the page the error will show but the page is still showing correctly.

I updated all routes and Link to items to ahve the absoulte paths for each page /services/ /contact/ etc... The error appears to be false as the page is loading but trying to find a way to fix the false 404.

Upvotes: 1

Views: 71

Answers (1)

rw_
rw_

Reputation: 106

In your AWS Console > Amplify, select your app, select Hosting > Rewrites and redirects. If there is a redirect for <*> to /index.html with type 400, that is the issue.

For non-SPAs change the type to 200.

For SPAs, can remove the 404 rewrite, and it is recommended to use:

Source: </^[^.]+$|.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json|webp)$)([^.]+$)/>

Target: /index.html

Type: 200 (Rewrite)

Source: https://docs.aws.amazon.com/amplify/latest/userguide/redirect-rewrite-examples.html

Upvotes: 0

Related Questions