Mula-mula saya ingin menyatakan bahawa saya telah mengambil langkah penyelesaian masalah untuk menyelesaikan ralat 403 dan 404 yang biasanya dikaitkan dengan isu ini dalam urutan lain pada Stack Overflow. Ini termasuk menetapkan halaman ralat CloudFront untuk mengubah hala ke /index.html pada ralat 403 dan 404. Saya juga cuba menggunakan fungsi Lambda@Edge untuk menulis semula URL.

Masalah yang saya hadapi ialah apabila saya menavigasi ke direktori akar, halaman tindak balas saya (menggunakan penghala tindak balas) disampaikan dengan betul dari aws. Tetapi apabila saya cuba menavigasi terus ke sublaluan, tiada apa yang kelihatan. Walau bagaimanapun, apabila saya menyediakan versi pengeluaran yang sama pada mesin tempatan saya, tiada masalah.

Ini ialah pautan awam untuk rujukan

Sila ambil perhatian bahawa jika anda menavigasi terus ke pautan, tidak akan ada masalah. Walau bagaimanapun, jika anda menavigasi ke https://d1e06h60n3f04n.cloudfront.net/preview/assetId, tiada apa yang akan dipaparkan. Kod halaman pratonton adalah seperti berikut:

import React, { useEffect, useState } daripada 'react'; import { useParams } daripada 'react-router'; import { BlogPreview } daripada './BlogPreview'; antara muka eksport IBlogPostData { tajuk: rentetan; kandungan: rentetan; } fungsi eksport BlogPreviewForm() { console.log("Memuatkan borang pratonton blog"); var { postId } = useParams(); const [blogPostData, setBlogPostData] = useState({ tajuk: "", kandungan: "" }); useEffect(() => { fungsi tak segerak loadPost() { var fileContent = await fetch(`previews/${postId}`); setBlogPostData(menunggu fileContent.json()); } loadPost(); }, []); kembali ( 
 
Pratonton Blog
  Kunci Api  SERAH 
 ); }

Halaman harus mendapatkan aset daripada assetId dan memuatkannya.

html indeks saya:

import ReactDOM daripada 'react-dom/client'; import './index.css'; import { AppRoutes } daripada './Routes'; import reportWebVitals daripada './reportWebVitals'; import { createBrowserRouter, RouterProvider } daripada 'react-router-dom'; laluan const = createBrowserRouter(AppRoutes); const root = ReactDOM.createRoot( document.getElementById('root') sebagai HTMLElement ); root.render(    ); reportWebVitals();

dan takrif laluan saya:

export const AppRoutes: RouteObject[] = [ { elemen: , laluan: '/', kanak-kanak: [{ laluan: 'pratonton', kanak-kanak: [{ laluan: '/preview/:postId', elemen:  }] }] } ]

Saya agak pasti ini ada kaitan dengan CloudFront dan S3 kerana ia berfungsi dengan baik secara tempatan, jadi saya tidak pasti menyiarkan kod yang berkaitan akan banyak membantu, itulah sebabnya saya memautkan ke URL.

Konfigurasi S3 untuk rujukan: