[React] 404 Not Found 의미와 리턴 페이지 만드는 방법

📚 목차

1.  404 에러 의미
2.  404 에러 시 리턴 페이지 만들기
3.  결과

1.  404 에러 의미

404 Error는 HTTP에서 파일을 찾지 못 할 시 발생하는 에러 코드입니다. 여기서 맨 앞 숫자 4는 클라이언트 오류를 의미하는 숫자이며, 뒤의 숫자 2개는 구체적인 에러 코드입니다. 이 에러는 서버를 찾긴 했으나 URL에 해당되는 페이지(파일)를 찾을 수 없을 때 발생합니다. 즉, 아래의 그림 1처럼, 개발해 놓지 않은 URL로 접근할 경우, 이에 대응하는 페이지를 리턴하여 사용자에게 올바른 경로로 접근하라고 안내할 수 있습니다.

그림 1. 네이버 404 에러 대응 페이지

 

반응형

2.  404 에러 시 리턴 페이지 만들기

리액트에서 404 에러 발생 시 반환할 페이지를 만들어 봅니다.

1) 패키지 설치

npm i react-router-dom

2) App.js

아래와 같은 App.js 파일 예제를 통해 설명해 드리겠습니다.

import { Route, Routes } from 'react-router-dom';
import React from 'react';
import Mainpage from './Mainpage';
import Uploadfile from './Uploadfile';
import NotFound from './NotFound';

const App = () => {
  return (
    <Routes>
      <Route path="/" element={<Mainpage />} />
      <Route path="/uploadfile" element={<Uploadfile />} />
      <Route path="/*" element={<NotFound />} /> 
    </Routes>
  );
};

export default App;

아래와 같이 총 3개의 페이지가 있다고 가정해 보겠습니다.

• Mainpage: Home 해당
• Uploadfile: 특정 페이지
• NotFound: 404 에러 시 반환 페이지

404 Error 시 반환할 페이지를 라우팅할 옵션은 아래와 같이 작성합니다.

• route path: *
• element: 반환할 페이지

728x90

3) NotFound.js 

import React from 'react';

const NotFound = () => {
    return (
        <div>
            <h1>Hey Tech Tistory Blog</h1>
            <a href='https://heytech.tistory.com/436'>https://heytech.tistory.com/436</a>
        </div>
    );
}

export default NotFound;

404 에러 시 반환할 페이지입니다.

3.  결과

그림 2. 결과 예시

📌 맺으며

바로 위에서 결과 예시로써 보여드린, 가볍게 즐겨볼 만한 카톡 대화 내용 분석 서비스를 소개합니다 :)

무료 서비스이며, 업로드 한 파일은 분석 이외에 절대 활용되거나 서버에 저장되지 않습니다😊

http://www.advancer-katalk.click/

카톡분석 왕 테스트

---

포스팅 내용에 오류가 있을 경우 아래에 댓글 남겨주시면 감사드리겠습니다.

그럼 오늘도 즐거운 하루 보내시길 바랍니다 :)

고맙습니다😊