使用 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 文件中将引用静态目录的路径切换为绝对路径：例如这解决了问题。