React-router-dom :: 라우팅하기

 

react_router-dom? 브라우저에서 사용되는 리액트 라우터.

 

라우팅이란?

SPA로 어플리케이션을 만들었을 때,

다른 주소에 따라 화면도 다르게 만들어 주는 것.

 

 

routes라는 폴더를 만들어주고, 화면이 달라질 때 표시할 컴포넌트별로 나눠줌.

 

  APP  

 

 

 

 

 

메인화면 :

<Route path="/" exact component={컴포넌트 이름} />

연결화면 :

<Route path="/주소" component={연결할 컴포넌트이름} />

 

 

**exact 는 정확하게 '/'만 있는 주소를 가진 화면으로만 이동.

exact를 사용하지 않을 경우, /:id도 /가 포함되어있기 때문에,

두 화면이 동시에 출력된다.

 

 

 

 

 

toDo마다 고유의 id가 있기 때문에

Link를 사용시 Detail로 이동.

 

 

 

 

 

 

 

 

 

 

 

링크 클릭 시 주소에 id값이 추가된 것을 볼 수 있다.