Tout d'abord, je voudrais souligner que j'ai suivi les étapes de dépannage pour résoudre les erreurs 403 et 404 qui sont généralement associées à ce problème dans d'autres fils de discussion sur Stack Overflow. Cela inclut la configuration de la page d'erreur CloudFront pour qu'elle redirige vers /index.html les erreurs 403 et 404. J'ai également essayé d'utiliser la fonction Lambda@Edge pour réécrire l'URL.

Le problème que je rencontre est que lorsque je navigue vers le répertoire racine, ma page de réaction (à l'aide du routeur de réaction) est correctement servie par AWS. Mais lorsque j'essaie d'accéder directement à la sous-route, rien ne semble s'afficher. Cependant, lorsque je diffuse la même version de production sur ma machine locale, il n'y a aucun problème.

Ceci est un lien public pour référence

Veuillez noter que si vous accédez directement au lien, il n'y aura aucun problème. Cependant, si vous accédez à https://d1e06h60n3f04n.cloudfront.net/preview/assetId, rien ne sera rendu. Le code de la page d'aperçu est le suivant :

importer React, { useEffect, useState } depuis 'react'; importer { useParams } depuis 'react-router' ; importer { BlogPreview } depuis './BlogPreview' ; interface d'exportation IBlogPostData { titre : chaîne ; contenu : chaîne ; } fonction d'exportation BlogPreviewForm() { console.log("Chargement du formulaire d'aperçu du blog"); var { postId } = useParams(); const [blogPostData, setBlogPostData] = useState({ titre : "", contenu : "" }); useEffect(() => { fonction asynchrone loadPost() { var fileContent = wait fetch(`previews/${postId}`); setBlogPostData(attendre fileContent.json()); } chargerPost(); }, []); retour ( 
 
Aperçu du blog
  Clé API  SOUMETTRE 
 ); } 
La page doit récupérer l'actif à partir de l'assetId et le charger. 
 
Mon index html:
 
importer ReactDOM depuis 'react-dom/client'; importer './index.css'; importer { AppRoutes } depuis './Routes' ; importer reportWebVitals depuis './reportWebVitals' ; importer { createBrowserRouter, RouterProvider } depuis 'react-router-dom' ; const routes = createBrowserRouter(AppRoutes); const racine = ReactDOM.createRoot( document.getElementById('root') en tant que HTMLElement ); root.render(    ); reportWebVitals();
 
et la définition de mon itinéraire :
 
export const AppRoutes : RouteObject[] = [ { élément : , chemin: '/', enfants: [{ chemin : 'aperçu', enfants: [{ chemin : '/preview/:postId', élément : < }] }] } ]≪/pré> 
Je suis presque sûr que cela a quelque chose à voir avec CloudFront et S3 car le rendu est correct localement, donc je ne suis pas sûr que publier le code pertinent aiderait beaucoup, c'est pourquoi je crée un lien vers l'URL. 
 
Configuration S3 pour référence :