<p>まず、スタック オーバーフローの他のスレッドでこの問題に関連するエラー 403 と 404 を解決するためのトラブルシューティング手順を実行したことを指摘しておきます。これには、エラー 403 および 404 で /index.html にリダイレクトするように CloudFront エラー ページを設定することが含まれます。 Lambda@Edge関数を使ってURLを書き換えてみたりもしました。 </p> <p>私が抱えている問題は、ルート ディレクトリに移動すると、反応ページ (反応ルーターを使用) が aws から正しく提供されることです。しかし、サブルートに直接移動しようとすると、何もレンダリングされないようです。ただし、同じ製品バージョンをローカル マシンで提供する場合は問題ありません。 </p> <p>これは参照用の公開リンクです</p> <p>直接リンクに移動しても問題ありませんのでご了承ください。ただし、https://d1e06h60n3f04n.cloudfront.net/preview/assetId に移動しても、何も表示されません。プレビュー ページのコードは次のとおりです: </p> <pre class="brush:php;toolbar:false;">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> ); }</pre> <p>ページは、assetId からアセットを取得してロードする必要があります。 </p> <p>私のインデックス html: </p> <pre class="brush:php;toolbar:false;">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();</pre> <p>そして私のルート定義: </p> <pre class="brush:php;toolbar:false;">export const AppRoutes: RouteObject[] = [ { 要素: <App />、 パス： '/'、 子供たち： [{ パス: 'プレビュー'、 子供たち： [{ パス: '/preview/:postId', 要素: < BlogPreviewForm /> }] }] } ]</pre> <p>ローカルでは問題なくレンダリングされるため、これは CloudFront と S3 に関係があると確信しています。そのため、関連するコードを投稿してもあまり役立つかどうかはわかりません。そのため、URL にリンクしています。 </p> <p>参考用の S3 構成:</p>