Why doesn't react's BrowserRouter work on cloudfront when s3 oai settings are applied?

Question

BrowserRouter was used to implement the react webpage spa in s3.

When I set it to public, it worked fine. However, when accessing from cloudfront after applying public access deny and oai, it did not work.
So I used HashRouter and it worked.

My guess is that s3 only supports static webpages, so browserRouter doesn't work, only HashRouter works. However, when set to public, BrowserRouter worked.

If I apply the oai setting to s3, why doesn't react's BrowserRouter work on cloudfront?

Answer

This Stackoverflow link might be addressing this issue https://stackoverflow.com/questions/51218979/react-router-doesnt-work-in-aws-s3-bucket
For steps about how to use BrowserRouter with S3 and CloudFront, refer to this external link https://aws.plainenglish.io/how-to-deploy-react-app-with-s3-and-cloudfront-6d170172cd58

Why doesn't react's BrowserRouter work on cloudfront when s3 oai settings are applied?

Relevant content