Apabila menggunakan aplikasi React ke S3 menggunakan React Router, laluan anak tidak diberikan dengan betul. Saya telah menyelesaikan 403 dan 404 ralat

Question

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

    useEffect(() => {
        fungsi tak segerak loadPost() {
            var fileContent = await fetch(`previews/${postId}`);
            setBlogPostData(menunggu fileContent.json());
        }
        loadPost();
    }, []);

    kembali (
        <div>
            <div>Pratonton Blog</div>
            <BlogPreview title={blogPostData?.title} content={blogPostData?.content} />
            <label>Kunci Api</label>
            <jenis input="teks"></input>
            <butang>SERAH</button>
        </div>
    );
}

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(
    <React.StrictMode>
        <RouterProvider router={routes} />
    </React.StrictMode>
);

reportWebVitals();

dan takrif laluan saya:

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

        }]
    }
]

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:

Answer 1

Pada satu ketika semasa menyelesaikan masalah, saya menetapkan pembolehubah halaman utama dalam package.json kepada "

Saya melihat dalam tetingkap pembangun penyemak imbas saya dan melihat bahawa semua fail dalam direktori statik yang terletak di akar baldi s3 telah menerima ralat 404. Ini berlaku kerana ia cuba mencipta laluan berbanding dengan URL yang saya muatkan: mis. https://d29uq6a9kfzg1q.cloudfront.net/preview/static/js/ main.3351ea6b.js

Dengan mengalih keluar halaman utama "." daripada package.json saya, ia menukar laluan yang merujuk direktori statik kepada laluan mutlak dalam fail index.html saya: contohnya ini menyelesaikan masalah.