코딩앙마 React공부 (라우터 구현)

이번에는 라우터 구현을 할건데 그전에 설치해야 할 것이 있다.

터미널에 npm install react-router-dom을 실행해 설치해준다.

 

 

 

그 후 App.js에 가서 { BrowserRouter, Route, Swtich }를 import해준다.

 

우선, app전체를 BrowserRouter로 감싸준다.

 

 

그 다음 Header는 모든 페이지에 다 나와야 하니깐 Header 다음 부분을 Switch로 감싸준다.

 

이렇게 하면 Switch 내부는 url에 따라 각각 다른 페이지들을 보여줄 것이다.

 

Switch의 외부는 모든 페이지에 공통으로 노출될 것이다.

(만약, footer가 필요하다면 Switch바깥쪽에 작성해주면 된다.)

 

 

이제 Route를 사용해보자

 

path=경로의 /는 첫 페이지를 의미

 

/day도 추가

 

결과를 테스트 해보면

 

Error가 난다.

 

그 이유를 찾아보니 버전 6부터는 Switch대신 Routes를 사용하기 때문이다.

그렇기 때문에 코드를 다시 수정하고 테스트를 해보면

localhost:3000과 localhost:3000/day가 동일한 페이지가 나온다.

 

그 이유는 무엇인가?

 

Routes로 Route를 감싸놓으면 일치하는 첫 번째 결과를 보여준다.

/day에도 /가 포함되어 있기 때문에 똑같은 화면이 보인다.

 

이를 해결하기위해 exact를 작성한다.

exact를 넣은 코드

 

 

이제 링크를 넣어보자

 

Day1, Day2, Day3를 클릭하면 Day컴포넌트를 보여주게 할 것입니다.

 

HTML에서는 a태그를 사용하지만 React에서는 Link to를 사용한다.

 

 

이제 Day1,2,3를 누르면 각 데이터에 맞는것으로 이동하게 수정하자

 

DayList.js

 

Day.js

App.js

 

결과 화면

 

EmptyPage.js 컴포넌트 하나 생성

 

 

 

App.js 수정

 

path에 *을 지정해주면 정의되지 않은 모든 경로에 대한 것을 의미한다.