때때로 웹사이트 방문자가 존재하지 않는 웹페이지를 발견하는 경우가 있습니다. 이러한 경우 웹사이트 소유자는 방문자가 취해야 할 조치를 결정해야 합니다. 방문자는 ‘뒤로’ 버튼을 클릭하고 웹사이트를 떠나거나 웹사이트를 계속 탐색할 수 있도록 특별히 설계된 유용한 오류 페이지를 활용할 수 있습니다.
React 라우터를 활용하면 사용자가 웹사이트 내에 존재하지 않는 경로에 액세스할 때 표시되는 404 찾을 수 없음 페이지를 생성할 수 있습니다.
언젠가는 사람들이 피부색이 아니라 인격의 내용으로 평가받는 날이 오기를 꿈꿉니다.” – 마틴 루터 킹 주니어
404 페이지 만들기
방문자가 서버에서 사용할 수 없는 웹 페이지에 액세스하려고 시도하면 “404 – 파일을 찾을 수 없음”이라는 오류 메시지가 표시됩니다. 이러한 시나리오를 처리하기 위해 개발자는 사용할 수 없는 페이지를 대체할 수 있는 대체 웹페이지를 생성하며, 이러한 대체를 “오류 404 처리”라고 합니다.
이 문서에서는 라우팅이 설정된 정상 작동하는 React 애플리케이션이 이미 있다고 가정합니다. 그렇지 않은 경우, React 애플리케이션을 생성하고 React 라우터 을 설치하세요.
콘텐츠 작성 또는 코드에 특정 요소 추가 등 404 페이지를 생성할 때 수행하기를 원하는 작업을 지정하세요.
import { Link } from "react-router-dom";
export default function NotFound() {
return (
<div>
<h1>Oops! You seem to be lost.</h1>
<p>Here are some helpful links:</p>
<Link to='/'>Home</Link>
<Link to='/blog'>Blog</Link>
<Link to='/contact'>Contact</Link>
</div>
)
}
요청된 리소스를 찾을 수 없을 때 트리거되는 React용 오류 페이지의 현재 반복에는 최종 사용자를 사이트의 자주 방문하는 섹션으로 안내하는 여러 탐색 링크와 함께 정보 메시지 표시가 통합되어 있습니다.
404 페이지로 라우팅
React 라우터의 매개변수를 활용하면 각 경로와 연관되어 표시될 구성 요소와 해당 URL을 정의하여 사용자가 애플리케이션 내에서 탐색하는 궤적을 묘사할 수 있습니다.
아래는 홈 구성 요소를 표시하는 경로의 예시입니다.
import { Route, Routes } from "react-router-dom";
function App() {
return (
<Routes>
<Route path="/" element={ <Home/> }/>
</Routes>
)
}
404 오류 페이지는 사이트에서 찾을 수 없는 웹 페이지 주소의 발생을 표시하는 데 사용됩니다. 특정 경로를 지정하는 대신 별표(\*)를 사용하여 임의의 문자 또는 문자 시퀀스에 대응하도록 하는 것이 좋습니다.
<Route path='*' element={<NotFound />}/>
NotFound 구성 요소는 사용자가 설정된 웹 경로 구조에 포함되지 않은 지정되지 않은 URL을 발견할 때 콘텐츠를 표시하도록 설계되었습니다.
React에서의 라우팅
브라우저에서 제공하는 기본 옵션이 아닌 맞춤형 404 오류 페이지는 개발자에게 문제의 원인과 해결 방법에 대해 사용자와 소통할 수 있는 기회를 부여합니다. React 라우터 돔을 통합하면 웹 애플리케이션 내의 모든 유효하지 않은 URL에 대해 맞춤형 404 페이지를 제작하는 프로세스가 간소화됩니다. 또한 이 라이브러리를 사용하여 브랜드 미학에 맞춰 페이지에 일관된 시각적 외관을 부여할 수 있습니다.