react - 페이지 전환

페이지가 하나만 있는 홈페이지는 거의 없습니다. router를 이용해 여러 페이지를 컨트롤 해 봅시다.

npm i react-router-dom

 

를 이용해 router를 하게 해주는 패키지를 설치합니다.

 

index.js로 가서 App를 BrowserRouter로 감싸줍니다.

 

이제 페이지를 2개 만듭니다. 저는 login과 streak 페이지 2개를 만들었습니다.

 

app.js에서 Routes와 Route를 추가해 줍니다. path에 경로를 넣어주고 element에는 컴포넌트를 넣어주면 됩니다.

 

이제 url에 /login을 하면 login에서 만든 페이지나 나옵니다.