React 애플리케이션에서 존재하지 않는 경로에 대한 예외 처리를 위해
404
페이지를 구현하는 방법에 대해 알아보겠습니다.
404
페이지가 필요한 이유 🧐사용자가 존재하지 않는 페이지로 이동했을 때, 빈 화면이나 오류 메시지를 보게 된다면 사용자 경험이 저하될 수 있습니다. 이를 방지하기 위해, 존재하지 않는 경로에서는 커스텀 404 페이지를 제공하는 것이 일반적입니다.
404
페이지 구현NotFound.jsx
컴포넌트 만들기404 페이지 전용 컴포넌트를 생성합니다.
import { Link } from "react-router-dom";
const NotFound = () => {
return (
<div style={{ textAlign: "center", padding: "50px" }}>
<h1>404 - 페이지를 찾을 수 없습니다.</h1>
<p>죄송합니다. 해당 페이지는 존재하지 않거나 이동되었습니다.</p>
<Link to="/">홈으로 돌아가기</Link>
</div>
);
};
export default NotFound;
Routes
에 404 페이지 추가하기React Router를 사용하는 경우, *
경로를 추가하면 정의되지 않은 모든 경로를 404 페이지로 연결할 수 있습니다.
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import NotFound from "./pages/NotFound";
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="*" element={<NotFound />} />
</Routes>
</Router>
);
}
export default App;
path="*"
: 사용자가 정의되지 않은 경로에 접근할 경우 자동으로 NotFound
페이지가 렌더링됩니다.