404 Error Page ( React )

잘못된 경로로 접속한 경우 보여줄 404 Error Page 작성법입니다.

라우팅 설정

잘못된 경로로 접속한 경우 라우팅 처리를 합니다.
react-router-dom의 switch 문을 이용해 에러 페이지 라우팅 처리를 할 수 있습니다.
switch는 마치 if 문과같이 동작해 맞는 라우터가 있다면 해당 컴포넌트를 보여주고 없다면 다음 라우터로 이동합니다.
이 특성을 이용해 Switch 객체의 마지막, 모든 라우터 path를 검사하고 없을 때 Error Page를 설정했습니다.

    <Switch>
        <Route path="/" exaxt component={HomePage} />
        <Route path="/detial" component={DetailPage} />
        <Route ( path="*" ) component={ErrorPage} />
    </Switch>

페이지 구현

구글에서 무작위로 Error Page를 골라 디자인했습니다. 크게 이모티콘/메세지/뒤로가기 (or 홈 버튼) 3개로 나눴습니다.

const ErrorPage = () => {
  const onGoBack: React.MouseEventHandler<HTMLButtonElement> = () => {
    history.back();
  };

  return (
    <div className="error">
      <div className="error__emoji-container">
        <Emoji />
      </div>
      <div className="error__message">
        <h1 className="error__message-code">404</h1>
        <p className="error__message-title">Sorry, Page not found</p>
        <p>The page you requested could not be found</p>
      </div>
      <div className="error__button-container">
        <button onClick={onGoBack}>
          Go back
        </button>
      </div>
    </div>
  );
};

스타일은 메인 컨텐츠를 가운데 배치하고 디자인에 맞춰 gutter를 조절하면 되겠습니다.

.error {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  ...
}