제목: react-router-dom v6를 사용하여 404 페이지 만드는 방법
이 튜토리얼에서는 react-router-dom v6를 사용하여 커스텀 404 페이지를 만드는 방법을 알아보겠습니다. 최근 v6로 업그레이드되면서 404 페이지를 처리하는 접근 방식이 변경되어 개발자들 사이에서 혼란이 생겼습니다. react-router-dom v6로 원활하게 404 페이지를 만들기 위한 간단한 해결책을 제공하겠습니다. 시작해봅시다!
문제 개요
react-router-dom v6로 업그레이드 한 후에는 많은 개발자들이 404 페이지 구현에 문제가 있다고 보고했습니다. path="/*" 또는 path="*"와 같은 다양한 해결책을 시도해도 404 페이지가 예상대로 렌더링되지 않는 문제가 발생합니다.
해결 방법
해결책 1: Routes에서 element 속성 사용
<Routes>
<Route path='*' element={<NotFound />} />
{/* 다른 route */}
</Routes>
이 해결책은 path="*"와 함께 Route를 추가하고 element 속성을 사용하여 렌더링할 컴포넌트를 제공하는 것입니다. 이렇게 하면 NotFound 컴포넌트가 일치하는 route가 없는 모든 route에 대해 표시됩니다.
해결책 2: BrowserRouter 컴포넌트와 path=”*” 선언 활용
<BrowserRouter>
<Routes>
{/* 다른 route */}
<Route path="*" element={<NotFound />} />
</Routes>
</BrowserRouter>
React Router v6에서는 기본적으로 exact 속성을 사용하지 않으므로 정확히 일치하는 route를 찾기 위해 path="*" 표기법을 사용할 수 있습니다. 이 방법은 일치하는 route가 없으면 NotFound 컴포넌트를 렌더링하도록 보장합니다.
해결책 3: react-router v6에서 path=”*” 구현
<BrowserRouter>
<Routes>
{/* 다른 route */}
<Route path="*" element={<NotFound />} />
</Routes>
</BrowserRouter>
react-router v6에서는 Switch 컴포넌트를 사용할 수 없습니다. 대신 Routes 컴포넌트 내에서 path="*" 표기법을 사용하여 일치하는 모든 route를 처리하고 NotFound 컴포넌트를 렌더링할 수 있습니다.
해결책 4: 리다이렉션과 URL 교체
<Route path="*" element={<Navigate to="/404" replace />} />
일치하는 route를 찾지 못하면 특정 URL로 리다이렉션하려면 Navigate 컴포넌트를 사용하여 to="/404" 속성을 설정하여 리다이렉션을 트리거하고 원하는 URL로 현재 URL을 교체할 수 있습니다.
결론
제공된 해결책 중 하나를 구현하여 react-router-dom v6에서 404 페이지를 수정할 수 있습니다. element 속성, BrowserRouter 컴포넌트, path=”*”, 또는 리다이렉션과 URL 교체를 선택하여 404 페이지가 올바르게 작동하도록 할 수 있습니다.
프로젝트 구조와 네이밍 규칙에 맞게 해결책을 조정해야 함을 기억하세요. React Router v6에서 일부 변경이 소개되었지만 약간의 조정을 통해 404 페이지가 원할하게 작동되도록 할 수 있습니다.
이제 react-router-dom v6에서 자신감 있게 404 페이지를 처리할 수 있습니다. 즐거운 코딩하세요!
