Getting "Key not Found:" while accessing static website on s3 - reactjs

Question

I have a working website which is developed in react and is hosted as a static site on AWS-S3. Our home page route is /home however when we try to access it, we get the following error:
Message: The specified key does not exist.
Key: home/home
RequestId: 0CJ72YSRVM1VR7DT
HostId: EnusXIGM/BWUeBk2Y+jjW2XFYtKjpFB66wf2n9om5L/+yX52JQUviK5ZLPJW6U0moywqGuIBc5M=
so, in the root folder, we have put a index.html in the root folder with the following content.
import React from "react";
import { useNavigate } from "react-router-dom";
const Coverpage: React.FC = () => {
const navigate = useNavigate();
return (
<>
<div>I am cover page!</div>
<button onClick={() => navigate("/home")}>Click me to navigate to homepage!</button>
</>
);
};
export default Coverpage;
and the navigation works.
I really need help to find a way where when the user access the site http://xxxx, the site directly navigate to http://xxxx/home and the site opens as desired.
Appreciate your help. not sure if we can do it at reactjs level or AWS s3

Answer 1

The solution is to configure AWS to rewrite most URLs to your React's index.html.
Create a CloudFront distribution which distributes the S3 bucket.
Ensure the distribution's Default Root Object is set to index.html.
Create a CloudFront function with the code below. This rewrites all requests to index.html except for requests to /static/*.
function handler(event) {
var request = event.request;
var parts = request.uri.split('/');
if(parts[1] != 'static'){
request.uri = '/index.html';
console.log('Rewriting: ' + request.uri);
} else {
console.log('Not Rewriting: ' + request.uri);
}
return request;
}
Go to the CF distribution then open the default behaviour (or create it if needed) and at the bottom, associate the function as a View Request type
Now you can visit the CF Distribution's URL (or your domain if configured) with any path and the React app will show.
The other option is to simply set the S3 bucket's Error Document to index.html, but this is very hacky and not recommended. Page visits will show the React app but will have undesirable 404 error codes.