React router (react-router-dom)공부 [1]

https://drive.google.com/open?id=1Q1wY2rf1yqFVWLsBlz9K7uxh4ZaBV_3f

router-app.zip

 

해당 파일을 받고 열어보면

이러한 간단한 웹페이가 나온다

 

일단은 router를 기능을 사용하려면 react자체 내에서는 router기능이 없기 때문이 react-router-dom이라는 라이브러리를 설치해야한다.

 

 

설치를 하고 index.js로 가서 import를 해주자

 

import를 해주고 해당 컴포넌트를 app로 둘러 싸준다.

BrowserRouter 컴포넌트는 history API (pushState, replaceState and the popstate event)를 이용해 URL과 UI의 싱크를 맞춘다.

 

그리고 나서 app.js에서

 

Route 컴포넌트를 import 해준다.  Route 컴포넌트는 현재 location이 설정된 path와 맞을경우 해당되는 컴포넌트를 redering 해준다.

 

문제는 product posts와 같이 home가 관련이 없는 route로 가도 home의 컴포넌트는 계속 나온다는 것이다. 

 

 

home이 계속 나오는 이유는 

http://localhost:3000/products 

주소에 "/" 가 있기 때문에 home 이 나오는 것이다. "/"와 "/products" 둘다 존재하기 때문에  products 컴포넌트와 home 컴포넌트가 동시에 rendering이 되는것이다.

 

위와 같이 home Route에 exact property를 추가해주거나 Switch 컴포넌트를 import해서 쓰면 문제가 해결된다.