react-router-dom에서 404페이지 보여주기

웹서비스는 존재하지 않는 URL로 접근할때 대체 페이지를 보여줘야한다.

웹 서버가 요청된 리소스를 찾지 못했음(Not Found)을 나타내는 HTTP 상태 코드인 404를 이용해 404페이지라고 부르기도한다.

 

react-router-dom은 Router 컴포넌트에서 페이지를 관리하는데,

각 경로에 맞는 페이지 컴포넌트를 조건부 렌더링하는 식이다.

routes/Router.tsx

나머지 모든 경로(*)에 404페이지를 보여주면 간단히 목적을 달성할 수 있다.

 

404 페이지

왜 404페이지에 오게 되었는지 그 원인을 알려주면 더 사용자 친화적인 서비스를 만들 수 있다.

더하여 상황에 맞게 "홈으로 이동" 같은 버튼도 추가해주면 사용자가 서비스를 편하게 이어서 즐길 수 있고

원하지 않는 사용자 이탈도 줄일 수 있을 것이다.