React Router를 사용하여 React 애플리케이션을 S3에 배포할 때 하위 경로가 올바르게 렌더링되지 않습니다. 403 및 404 오류를 해결했습니다.
<p>먼저 스택 오버플로의 다른 스레드에서 이 문제와 일반적으로 관련된 오류 403 및 404를 해결하기 위한 문제 해결 단계를 수행했음을 지적하고 싶습니다. 여기에는 오류 403 및 404에서 /index.html로 리디렉션되도록 CloudFront 오류 페이지를 설정하는 것이 포함됩니다. 또한 Lambda@Edge 함수를 사용하여 URL을 다시 작성해 보았습니다. </p>
<p>내가 겪고 있는 문제는 루트 디렉터리로 이동할 때 내 반응 페이지(반응 라우터 사용)가 aws에서 올바르게 제공된다는 것입니다. 하지만 하위 경로로 직접 이동하려고 하면 아무 것도 렌더링되지 않는 것 같습니다. 그러나 로컬 컴퓨터에서 동일한 프로덕션 버전을 제공하면 문제가 없습니다. </p>
<p>참고용 공개 링크입니다</p>
<p>링크로 바로 이동하시면 문제가 없으니 참고해주세요. 그러나 https://d1e06h60n3f04n.cloudfront.net/preview/assetId로 이동하면 아무것도 렌더링되지 않습니다. 미리보기 페이지 코드는 다음과 같습니다: </p>
<pre class="brush:php;toolbar:false;">'react'에서 React, { useEffect, useState }를 가져옵니다.
'반응 라우터'에서 { useParams }를 가져옵니다.
'./BlogPreview'에서 { BlogPreview } 가져오기;
내보내기 인터페이스 IBlogPostData {
제목: 문자열;
내용: 문자열;
}
내보내기 함수 BlogPreviewForm() {
console.log("블로그 미리보기 양식 로드 중");
var { postId } = useParams();
const [blogPostData, setBlogPostData] = useState<IBlogPostData>({ title: "", content: "" });
useEffect(() => {
비동기 함수 loadPost() {
var fileContent = wait fetch(`previews/${postId}`);
setBlogPostData(fileContent.json()을 기다립니다);
}
로드포스트();
}, []);
반품 (
<div>
<div>블로그 미리보기</div>
<BlogPreview title={blogPostData?.title} 콘텐츠={blogPostData?.content} />
<label>Api 키</label>
<입력 유형="텍스트"></input>
<버튼>제출</버튼>
</div>
);
}</pre>
<p>페이지는 자산 ID에서 자산을 가져와서 로드해야 합니다. </p>
<p>내 색인 HTML: </p>
<pre class="brush:php;toolbar:false;">'react-dom/client'에서 ReactDOM을 가져옵니다.
import './index.css';
import { AppRoutes } from './Routes';
'./reportWebVitals'에서 ReportWebVitals 가져오기;
import { createBrowserRouter, RouterProvider } 'react-router-dom';
const 경로 = createBrowserRouter(AppRoutes);
const 루트 = ReactDOM.createRoot(
document.getElementById('root')(HTMLElement)
);
루트.렌더(
<React.StrictMode>
<RouterProvider 라우터={경로} />
</React.StrictMode>
);
reportWebVitals();</pre>
<p>그리고 내 경로 정의: </p>
<pre class="brush:php;toolbar:false;">export const AppRoutes: RouteObject[] = [
{
요소: <앱 />,
길: '/',
어린이들: [{
경로: '미리보기',
어린이들: [{
경로: '/preview/:postId',
요소: < BlogPreviewForm />
}]
}]
}
]</pre>
<p>CloudFront 및 S3가 로컬에서 잘 렌더링되기 때문에 이것이 CloudFront 및 S3와 관련이 있다고 확신하므로 관련 코드를 게시하는 것이 큰 도움이 될지 확신할 수 없으므로 URL에 링크합니다. </p>
<p>참고용 S3 구성:</p>