使用 React 路由器將 React 應用程式部署到 S3 時，無法正確渲染子路由。我已經解決了 403 和 404 錯誤
P粉501007768
2023-09-02 15:05:04
<p>首先我想指出的是，我已經採取了故障排除步驟來解決錯誤 403 和 404，這些錯誤通常與堆疊溢出的其他線程中的此問題相關。其中包括將 CloudFront 錯誤頁面設定為在錯誤 403 和 404 時重定向到 /index.html。我還嘗試使用 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 } 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>
);
}</pre>
<p>該頁面應該從 assetId 獲取資產並加載它。 </p>
<p>我的索引 html：</p>
<pre class="brush:php;toolbar:false;">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();</pre>
<p>與我的路線定義：</p>
<pre class="brush:php;toolbar:false;">export const AppRoutes: RouteObject[] = [
{
element: <App />,
path: '/',
children: [{
path: 'preview',
children: [{
path: '/preview/:postId',
element: < BlogPreviewForm />
}]
}]
}
]</pre>
<p>我非常確定這與 CloudFront 和 S3 有關，因為它在本地渲染得很好，所以我不確定發布相關程式碼會有多大幫助，這就是我連結到 URL 的原因。 </p>
<p>S3配置供參考：</p>
在故障排除過程中的某個時刻，我將 package.json 中的主頁變數設為「.」
我在瀏覽器的開發人員視窗中查看，發現位於 s3 儲存桶根目錄的靜態目錄中的所有檔案都收到 404 錯誤。發生這種情況是因為它試圖創建一個相對於我正在加載的URL 的路徑：例如https://d29uq6a9kfzg1q.cloudfront.net/preview/static/js/ main.3351ea6b.js
#透過刪除主頁「.」從我的 package.json 中，它在我的 index.html 檔案中將引用靜態目錄的路徑切換為絕對路徑：例如這解決了問題。