react 라우팅(페이지 나누기)

react에서 페이지를 나누는 방법을 정리하려 합니다.

 

 

1. 먼저, 라우팅을 하기전에 터미널을 열고 설치를 진행합니다 yarn이 설치되있지 않다면 'npm install react-router-dom' 으로 설치를 합니다.

 

 

2. 설치 후 index.js파일로 가서 BrowserRouter를 import하고 ReactDom.render괄호 안에 컴포넌트를 태그로 감싸면 라우팅할 준비를 마치게 됩니다.

 

 

3. Route태그 임포트하기!

 

 

<Route>태그로 main과 detail페이지를 나누어 작성하면 됩니다. 주의할 점은 exact 속성을 넣어주지 않으면 /detail 페이지로 이동했을때도 main페이지의 내용이 나오기 때문에 exact 속성을 넣어주어야 합니다.