404 페이지 만들기 Router-4

이번엔 404페이지를 만들거다.

 

https://mhypro.tistory.com/48

Router를 이용해 페이지를 나누어보자. Router - 1

Router를 모른다면 이걸먼저 보는걸 추천한다. 

 

404Page는 맞지않는 URL을 입력했을때의 페이지를 보여지게 된다. 즉 사용자입장에서 이상한 URL을 입력했을때 잘못입력했다는 페이지를 띄어주는거다. 

 

코드로 봐보자. 

 

일단 404페이지를 띄울 컴포넌트 먼저 만들어보자. 

그런다음 Routes에서 한줄만 추가해주면된다. 정말 간단하다. 

 

<Route path="*" element={<ErrorPage></ErrorPage>}/>

<Route>를 한줄 추가해줬는데 여기서 path="*" 이란 *는 모든 것을 뜻함. 즉 정해진 path외에 모든 path는 *로 판단되어 <ErrorPage/>컴포넌트가 띄어지게된다.

 

굉장히 간단하다. 이건 중첩 라우터에서도 가능하다. 

 

*의 컴포넌트는 상위 Route의 <Outlet/> 들어간다. 

 

화질구지