React 잘못된 경로 페이지 만들기 (Router)

React 잘못된 경로 페이지 만들기 (Router)

 

 

 

프로젝트를 구현하면서 사용자가 잘못된 경로를 입력했을때 

 

 

이런 페이지가 뜬다.

 

이대로 냅둬도 상관없긴하지만, 만약 이렇게 사용자가 주소를 잘못입력했을때 내가 원하는 화면을 보여주게 하고 싶다면 어떻게 해야할까?

 

바로 Router를 사용하면 된다.

 

이렇게 Router 경로를 * 로 설정하게 되면, localhost에서 지정한 경로들 외의 모든 경로들은 지정한 페이지로 이동하게 된다.

 

여기서 element에 있는 NotFound는 내가 따로 만든 NotFound.js 페이지이다. 

 

사용자가 경로를 잘못입력하면 이 NotFound.js 페이지로 이동시켜라 라는 뜻이된다.

 

 

NotFound.js 는 다음과 같이 만들었다. 참고해보시길.

 

 

사용자에게 보여지는 페이지는 다음과 같다.

 

 

 

되돌아가기 버튼을 생성해 메인화면으로 돌아갈 수 있게 설정해 주었다.