Lors du déploiement d'une application React sur S3 à l'aide de React Router, les routes enfants ne sont pas rendues correctement. J'ai résolu les erreurs 403 et 404

Question

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<IBlogPostData>({ titre : "", contenu : "" });

    useEffect(() => {
        fonction asynchrone loadPost() {
            var fileContent = wait fetch(`previews/${postId}`);
            setBlogPostData(attendre fileContent.json());
        }
        chargerPost();
    }, []);

    retour (
        <div>
            <div>Aperçu du blog</div>
            <BlogPreview title={blogPostData?.title} content={blogPostData?.content} />
            <label>Clé API</label>
            <type d'entrée="texte"></input>
            <bouton>SOUMETTRE</bouton>
        </div>
    );
}</pré>
<p>La page doit récupérer l'actif à partir de l'assetId et le charger. </p>
<p>Mon index html:</p>
<pre class="brush:php;toolbar:false;">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(
    <React.StrictMode>
        <RouterProvider router={routes} />
    </React.StrictMode>
);

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 :

Answer 1

À un moment donné lors du dépannage, j'ai défini la variable de page d'accueil dans package.json sur "

".

J'ai regardé dans la fenêtre développeur de mon navigateur et j'ai vu que tous les fichiers du répertoire statique situé à la racine du bucket s3 recevaient une erreur 404. Cela se produit parce qu'il essaie de créer un chemin relatif à l'URL que je charge : par exemple https://d29uq6a9kfzg1q.cloudfront.net/preview/static/js/ main.3351ea6b.js

.

En supprimant le home "." de mon package.json, le chemin référençant le répertoire statique est remplacé par un chemin absolu dans mon fichier index.html : par exemple, cela a résolu le problème.