[React] 404 에러 처리 페이지 만들기

404 not found

404란 'HTTP 오류코드' 이다.

이러한 페이지가 뜨는 이유는 내가 클릭한 해당 페이지나 문서가 존재하지 않거나,

입력한 url의 주소에 오타가 있을 경우이다.

 

 

404 에러 처리 페이지 

 

1. Route 설정

 

<BrowserRouter >
    <Routes>
        <Route path="*" element={<NotFoundPage />} />
    </Routes>
</BrowserRouter>

 

 

2. NotFundPage.tsx

 

import { Box } from "@mui/material";
import { Link } from "react-router-dom";

const NotFoundPage = () => {
    return (
        <Box sx={{ textAlign: "center", mt: 30 }}>
            <img src="https://assets.codepen.io/1538474/404.svg" />
            <h2>404 Oops! This Page Could Not Be Found</h2>
            <h3>
                SORRY BUT THE PAGE YOU ARE LOOKING FOR DOES NOT EXIST, <br />
                HAVE BEEN REMOVED. NAME CHANGED OR IS TEMPORARILY UNAVAILABLE
            </h3>
            <Link to="/views/layout/Navigation">GO TO HOMEPAGE</Link>
        </Box>
    );
};

export default NotFoundPage;

 

 

3. 결과화면