React Router を使用して React アプリケーションを S3 にデプロイすると、子ルートが正しくレンダリングされません。 403 エラーと 404 エラーを解決しました

Question

まず、スタック オーバーフローの他のスレッドでこの問題に関連するエラー 403 と 404 を解決するためのトラブルシューティング手順を実行したことを指摘しておきます。これには、エラー 403 および 404 で /index.html にリダイレクトするように CloudFront エラー ページを設定することが含まれます。 Lambda@Edge関数を使ってURLを書き換えてみたりもしました。

私が抱えている問題は、ルート ディレクトリに移動すると、反応ページ (反応ルーターを使用) が aws から正しく提供されることです。しかし、サブルートに直接移動しようとすると、何もレンダリングされないようです。ただし、同じ製品バージョンをローカル マシンで提供する場合は問題ありません。

これは参照用の公開リンクです

直接リンクに移動しても問題ありませんのでご了承ください。ただし、https://d1e06h60n3f04n.cloudfront.net/preview/assetId に移動しても、何も表示されません。プレビュー ページのコードは次のとおりです:

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

エクスポート インターフェイス IBlogPostData {
    タイトル: 文字列;
    内容: 文字列;
}

エクスポート関数 BlogPreviewForm() {
    console.log("ブログ プレビュー フォームを読み込んでいます");
    var { postId } = useParams();
    const [blogPostData, setBlogPostData] = useState<IBlogPostData>({ title: "", content: "" });

    useEffect(() => {
        非同期関数loadPost() {
            var fileContent = await fetch(`previews/${postId}`);
            setBlogPostData(await fileContent.json());
        }
        ロードポスト();
    }、[]);

    戻る （
        <div>
            <div>ブログプレビュー</div>
            <ブログプレビュー title={blogPostData?.title} content={blogPostData?.content} />
            <label>API キー</label>
            <input type="text"></input>
            <ボタン>送信</ボタン>
        </div>
    );
}

ページは、assetId からアセットを取得してロードする必要があります。

私のインデックス html:

ReactDOM を 'react-dom/client' からインポートします;
'./index.css' をインポートします。
import { AppRoutes } から './Routes';
reportWebVitals を './reportWebVitals' からインポートします。
import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const Routes = createBrowserRouter(AppRoutes);

const root = ReactDOM.createRoot(
    document.getElementById('root') を HTMLElement として使用
);

root.render(
    <React.StrictMode>
        <RouterProvider ルーター={ルート} />
    </React.StrictMode>
);

reportWebVitals();

そして私のルート定義:

export const AppRoutes: RouteObject[] = [
    {
        要素: <App />、
        パス： '/'、
        子供たち： [{
            パス: 'プレビュー'、
            子供たち： [{
                パス: '/preview/:postId',
                要素: < BlogPreviewForm />
            }]

        }]
    }
]

ローカルでは問題なくレンダリングされるため、これは CloudFront と S3 に関係があると確信しています。そのため、関連するコードを投稿してもあまり役立つかどうかはわかりません。そのため、URL にリンクしています。

参考用の S3 構成:

Answer 1

トラブルシューティング プロセス中のある時点で、package.json のホームページ変数を「.」に設定しました。

ブラウザの開発者ウィンドウを見ると、s3 バケットのルートにある静的ディレクトリ内のすべてのファイルが 404 エラーを受け取っていることがわかりました。これは、ロードしている URL に対する相対パスを作成しようとするために発生します: 例: https://d29uq6a9kfzg1q.cloudfront.net/preview/static/js/ main.3351ea6b.js

package.json からホームページ「.」を削除すると、静的ディレクトリを参照するパスが、index.html ファイル内の絶対パスに切り替わりました。たとえば、これで問題は解決しました。