React App on S3 and CloudFront - Navigation Bar Clicks Not Rendering Content

0

Hello,

I have a React application hosted on Amazon S3 as a static web page, and it's connected to a CloudFront web distribution that routes traffic to an S3 endpoint.

However, I'm facing an issue with the navigation bar/items in my app. When I click on the menu items, nothing happens. The page content doesn't render. Strangely, if I manually reload the page or enter a link into the browser and hit enter, the page loads correctly with the content displayed.

I've diligently checked the browser's developer console for error messages, but it doesn't provide any clues as to what might be causing this problem.

Have you encountered a similar issue before, or do you have any insights into what might be causing it? It's worth noting that the frontend works perfectly when running locally outside of S3 and CloudFront.

This is the main settings configurations:

Enter image description here

Origins configurations:

Enter image description here

Behaviors configurations:

Enter image description here

Error page configurations:

Enter image description here

I enabled website hosting on the S3 bucket.

Enter image description here

My react application in S3 Bucket:

Enter image description here

Thank you very much.

질문됨 일 년 전244회 조회
1개 답변
0

Hi, did you manage to find a solution for the navigation bar issue in your React app deployed on S3 and CloudFront?

답변함 8달 전

로그인하지 않았습니다. 로그인해야 답변을 게시할 수 있습니다.

좋은 답변은 질문에 명확하게 답하고 건설적인 피드백을 제공하며 질문자의 전문적인 성장을 장려합니다.

질문 답변하기에 대한 가이드라인

관련 콘텐츠