Beim Bereitstellen einer React-Anwendung auf S3 mithilfe von React Router werden untergeordnete Routen nicht korrekt gerendert. Ich habe die Fehler 403 und 404 behoben

Question

Zuerst möchte ich darauf hinweisen, dass ich die Schritte zur Fehlerbehebung unternommen habe, um die Fehler 403 und 404 zu beheben, die häufig mit diesem Problem in anderen Threads auf Stack Overflow verbunden sind. Dazu gehört, dass die CloudFront-Fehlerseite bei den Fehlern 403 und 404 auf /index.html umgeleitet wird. Ich habe auch versucht, die URL mit der Lambda@Edge-Funktion neu zu schreiben.

Das Problem, das ich habe, ist, dass meine React-Seite (mit React-Router) von aws korrekt bereitgestellt wird, wenn ich zum Stammverzeichnis navigiere. Aber wenn ich versuche, direkt zur Unterroute zu navigieren, scheint nichts gerendert zu werden. Wenn ich jedoch dieselbe Produktionsversion auf meinem lokalen Computer bereitstelle, gibt es kein Problem.

Dies ist ein öffentlicher Link als Referenz

Bitte beachten Sie, dass es kein Problem gibt, wenn Sie direkt zum Link navigieren. Wenn Sie jedoch zu https://d1e06h60n3f04n.cloudfront.net/preview/assetId navigieren, wird nichts gerendert. Der Code der Vorschauseite lautet wie folgt:

import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router';
import { BlogPreview } from './BlogPreview';

Exportschnittstelle IBlogPostData {
    Titel: Zeichenfolge;
    Inhalt: Zeichenfolge;
}

Exportfunktion BlogPreviewForm() {
    console.log("Blog-Vorschauformular wird geladen");
    var { postId } = useParams();
    const [blogPostData, setBlogPostData] = useState<IBlogPostData>({ title: "", content: "" });

    useEffect(() => {
        asynchrone Funktion loadPost() {
            var fileContent = waiting fetch(`previews/${postId}`);
            setBlogPostData(await fileContent.json());
        }
        LoadPost();
    }, []);

    zurückkehren (
        <div>
            <div>Blog-Vorschau</div>
            <BlogPreview title={blogPostData?.title} content={blogPostData?.content} />
            <label>API-Schlüssel</label>
            <input type="text"></input>
            <button>SENDEN</button>
        </div>
    );
}

Die Seite sollte das Asset von assetId abrufen und laden.

Mein Index html:

reactDOM aus 'react-dom/client' importieren;
import './index.css';
import { AppRoutes } from './Routes';
importiere reportWebVitals aus './reportWebVitals';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const Routen = createBrowserRouter(AppRoutes);

const root = ReactDOM.createRoot(
    document.getElementById('root') als HTMLElement
);

root.render(
    <React.StrictMode>
        <RouterProvider router={routes} />
    </React.StrictMode>
);

reportWebVitals();

und meine Routendefinition:

export const AppRoutes: RouteObject[] = [
    {
        Element: <App />,
        Weg: '/',
        Kinder: [{
            Pfad: 'Vorschau',
            Kinder: [{
                Pfad: '/preview/:postId',
                Element: < BlogPreviewForm />
            }]

        }]
    }
]

Ich bin mir ziemlich sicher, dass dies etwas mit CloudFront und S3 zu tun hat, da es lokal einwandfrei gerendert wird. Daher bin ich mir nicht sicher, ob die Veröffentlichung des relevanten Codes viel helfen würde, weshalb ich auf die URL verlinke.

S3-Konfiguration als Referenz:

Answer 1

在故障排除过程中的某个时刻，我将 package.json 中的主页变量设置为“.”

我在浏览器的开发人员窗口中查看，发现位于 s3 存储桶根目录的静态目录中的所有文件都收到 404 错误。发生这种情况是因为它试图创建一个相对于我正在加载的 URL 的路径：例如https://d29uq6a9kfzg1q.cloudfront.net/preview/static/js/ main.3351ea6b.js

通过删除主页“.”从我的 package.json 中，它在我的 index.html 文件中将引用静态目录的路径切换为绝对路径：例如这解决了问题。