[ReactJS] 경로 없는 페이지 404 처리

리액트 라우터 v6에서는 Route 컴포넌트의 사용 방식이 v5와 달라졌다. element 속성을 사용하여 JSX를 전달하고, Route 컴포넌트에 닫는 태그 없이 바로 JSX를 넣는 방식으로 변경되었다. 또한, "404 페이지"와 같은 fallback 경로를 처리할 때는 path="*"을 사용한다.

 

 

path="*"를 사용한 404 페이지 설정

가장 간단한 방법은 <Route path="*">를 추가하여 404 페이지를 만들고, 존재하지 않는 경로로 이동할 경우 해당 페이지를 렌더링하는 것이다.

// App.js 
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import HomePage from "./pages/HomePage";
import AboutPage from "./pages/AboutPage";
import NotFoundPage from "./pages/NotFoundPage"; // 404 페이지

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
        
        {/* 404 페이지 처리 */}
        <Route path="*" element={<NotFoundPage />} />
      </Routes>
    </Router>
  );
}

export default App;

 

 

// NotFoundPage.js

import React from "react";
import { useNavigate } from "react-router-dom";

function NotFoundPage() {
  const navigate = useNavigate();

  return (
    <div style={{ textAlign: "center", marginTop: "50px" }}>
      <h1>404 - 페이지를 찾을 수 없습니다.</h1>
      <p>요청하신 페이지가 존재하지 않습니다.</p>
      <button onClick={() => navigate("/")}>홈으로 가기</button>
    </div>
  );
}

export default NotFoundPage;

 

 

 

useEffect를 사용해 자동 리디렉션 처리하기

useEffect를 사용하여 404 페이지에서 몇 초 후 자동으로 홈으로 이동하게 만들 수도 있다.

// NotFoundPage.js

import { useEffect } from "react";
import { useNavigate } from "react-router-dom";

function NotFoundPage() {
  const navigate = useNavigate();

  useEffect(() => {
    setTimeout(() => {
      navigate("/");
    }, 3000); // 3초 후 홈으로 이동
  }, [navigate]);

  return (
    <div style={{ textAlign: "center", marginTop: "50px" }}>
      <h1>404 - 페이지를 찾을 수 없습니다.</h1>
      <p>3초 후 홈으로 이동합니다...</p>
    </div>
  );
}

export default NotFoundPage;