[리액트 MBTI - 기획부터 배포까지] 1-부록. 404페이지 전달하기(React Router Dom)

0. 홍보

http://my-mythology-character.site/

신화 속 나의 사랑 유형 찾기

젭알 광고 많이 눌러주세요 엉엉

코드는 여기서 보실 수 있습니다.

https://github.com/BUZZINGPolarBear/Myth-MBTI

GitHub - BUZZINGPolarBear/Myth-MBTI: react + node.js&express

 

1. 404페이지 만들기

이전 포스팅에서 이어지는 부분입니다. React Router Dom으로 라우팅 페이지가 구성되어져 있어야 합니다.

우선 라우팅 규칙의 제일 하단에 다음과 같이 "/*"를 넣어줍니다. 

 

정규 표현식 *(스타)는 어떤 길이의 문자열이 와도 결과에 포함시키므로, 라우팅 규칙 하단에 위치하지 않으면 사용자가 옳바른 주소를 입력해도 404페이지를 반환할 수 있습니다.

 

예를 들면 이런 식입니다. 

<BrowserRouter>
  <Routes>
    <Route path="/" element={<BrowerMain />} />
    <Route path="/result" element={<Result />}></Route>
    <Route path="/test" element={<Test />}></Route>
    <Route path="/*" element={<NotFound />}></Route>
  </Routes>
</BrowserRouter>

 

그럼 이제, NotFound 페이지를 만들어봅시다. 저는 이렇게 작성했습니다.

//NotFound.js

import styled from "styled-components";
import {isBrowser, isMobile} from "react-device-detect";

function NotFound() {
  const MainPicArea = styled.div`
    width: 350px;
    height: 350px;
    margin: auto;
  `;
  const MainPic = styled.img`
    width: 100%;
    height: 100%;
  `;
  const TitleArea = styled.div`
    width: 100%;
    font-size: 1.5rem;
    font-weight: 600;

    margin: auto;
    margin-top: 1.2rem;

    text-align: center;
  `;

  const SubTitleArea = styled.div`
    width: 100%;
    font-size: 1.2rem;

    margin: auto;
    margin-top: 1.2rem;
    line-height: 1.5rem;
    text-align: center;
  `;

  if (isBrowser) {
    const BrowserApp = styled.div`
      width: 60vw;
      height: 100vh;
      margin: auto;
      padding-top: 5vh;
    `;
    return (
      <div>
          <BrowserApp>
            <MainPicArea>
              <MainPic
                src="/images/404.jpeg"
                alt="main"
              />
              <TitleArea>404 Error</TitleArea>
              <SubTitleArea>
                여긴 어디죠...? <br></br> 이 페이지는 존재하지 않습니다.
              </SubTitleArea>
            </MainPicArea>
          </BrowserApp>

      </div>
    );
  }

  if (isMobile) {
    const MobileBrowserApp = styled.div`
      width: 98vw;
      height: 100vh;
      margin: auto;
      padding-top: 5vh;
    `;

    return (
      <div>
          <MobileBrowserApp>
            <MainPicArea>
              <MainPic
                src="./images/404.jpeg"
                alt="main"
              />
              <TitleArea>404 Error</TitleArea>
              <SubTitleArea>
                여긴 어디죠...? <br></br> 이 페이지는 존재하지 않습니다.
              </SubTitleArea>
              
            </MainPicArea>
          </MobileBrowserApp>
      </div>
    );
  }
}

export default NotFound;

사이트에는 다음과 같이 보이게 됩니다.

http://my-mythology-character.site/blahblah

신화 속 나의 사랑 유형 찾기

감사합니다.