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.

feita há um ano244 visualizações
1 Resposta
0

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

respondido há 8 meses

Você não está conectado. Fazer login para postar uma resposta.

Uma boa resposta responde claramente à pergunta, dá feedback construtivo e incentiva o crescimento profissional de quem perguntou.

Diretrizes para responder a perguntas