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.

demandé il y a un an243 vues
1 réponse
0

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

répondu il y a 8 mois

Vous n'êtes pas connecté. Se connecter pour publier une réponse.

Une bonne réponse répond clairement à la question, contient des commentaires constructifs et encourage le développement professionnel de la personne qui pose la question.

Instructions pour répondre aux questions