[react] 페이지 이동 Redirect /history.push/Link

react에서 페이지이동의 기본적인 세가지 방법으로

Redirect,history,Link 가 있다. 세가지 특성이 헷갈려서 

간단하게 요약해보았다.

 

1.history.push

-hitory.push(/해당경로)로 사용된다

-현재 url 기록이 이동후도 남는다.

-react-router-dom의 useHistory를 import 해온다

- jsx에서 사용할수 없고, 어떤 event 안의 함수에서 활용한다

-하위 컴퍼넌트에 history 사용시 부모의 props 로 전달받아야 하며, 최상위 컴퍼넌트에 BrowserRouter와 Route 사용시 

history 객체가 자동 전달된다.

*history.replace : 현재의 url 기록이 이동 후 남지 않게 할 때 사용된다.(Redirect 와 비슷)

 

2.Redirect

-현재  url기록이 이동후 남지 않는다.

-react-router-dom의 Redirect를 import 해온다.

-jsx에서 사용한다. state 삼항연산자로 주로 사용한다.

-history 처럼 props로 남기지 않아도 자식컴퍼넌트에서 다른 페이지로 이동 가능하다.

  

3.Link

-react-router-dom의 Link를 import해 온후 사용된다.

-<a>로 작동되지만 실제로는 페이지 전체 리로드가 아닌 부분 리로드이다.

-현재 경로가 history 객체에 남는다(history.push와 비슷)

(*history.replace 와 같이 경로 남기지 않으려면 <Link to ="/이동경로" replace={true />

로 작성한다)