使用 React 路由器將 React 應用程式部署到 S3 時，無法正確渲染子路由。我已經解決了 403 和 404 錯誤

Question

首先我想指出的是，我已經採取了故障排除步驟來解決錯誤 403 和 404，這些錯誤通常與堆疊溢出的其他線程中的此問題相關。其中包括將 CloudFront 錯誤頁面設定為在錯誤 403 和 404 時重定向到 /index.html。我還嘗試使用 Lambda@Edge 函數重寫 URL。

我遇到的問題是，當我導航到根目錄時，我的反應頁面（使用反應路由器）正在從 aws 正確提供服務。但是當我嘗試直接導航到子路線時，似乎沒有任何內容呈現。但是，當我在本機電腦上提供相同的生產版本時，就沒有問題了。

這是供參考的公共連結

請注意，如果您直接導航到該鏈接，則沒有問題。但是，如果您導覽至 https://d1e06h60n3f04n.cloudfront.net/preview/assetId，則不會呈現任何內容。預覽頁面程式碼如下：

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

export interface IBlogPostData {
    title: string;
    content: string;
}

export function BlogPreviewForm() {
    console.log("Loading blog preview form");
    var { postId } = useParams();
    const [blogPostData, setBlogPostData] = useState<IBlogPostData>({ title: "", content: "" });

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

    return (
        <div>
            <div>Blog Preview</div>
            <BlogPreview title={blogPostData?.title} content={blogPostData?.content} />
            <label>Api Key</label>
            <input type="text"></input>
            <button>SUBMIT</button>
        </div>
    );
}

該頁面應該從 assetId 獲取資產並加載它。

我的索引 html：

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

const routes = createBrowserRouter(AppRoutes);

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

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

reportWebVitals();

與我的路線定義：

export const AppRoutes: RouteObject[] = [
    {
        element: <App />,
        path: '/',
        children: [{
            path: 'preview',
            children: [{
                path: '/preview/:postId',
                element: < 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 檔案中將引用靜態目錄的路徑切換為絕對路徑：例如這解決了問題。