React에서 페이지 라우팅을 할 수 있는 여러가지 방법

서론

지난 프로젝트를 하면서 페이지를 라우팅하는데 여러가지 방법을 썼다.
통일해서 하나만 쓰는게 가독성이 좋으나 학습하는 입장에서 여러가지를 써보는게 더 도움이 될것같다는 생각이 들었다.

각 방법과 차이점

react에는 페이지라우팅 방법이 여러가지 있었다.

<Link>, a태그,history.push('url'),window.location.replace('url')

각 방법의 차이점을 한번 알아보자

먼저 ,a태그와 <Link>는 지정한 경로로 바로 이동시켜주는점에서 동일하다

하지만 주로 a태그는 외부 사이트로 이동시켜주고 <Link>는 프로젝트 내에서 이동한다는점이다.

또 history.push('url')의 경우 조건이 충족되었을때 이동시켜줄수있어 동적으로 제어가 가능하다. (조건문 안에 사용이 가능하기 때문이다.)

window.location.replace('url')는 JavaScript에서 쓰는 방법으로 현재페이지를 url페이지로 덮어 씌우는것이다. 따라서 뒤로가기가 불가능하다. 뒤로가기 하려면window.location.href('url') 를 쓰자.

그리고 각 방법에따라 값을 넘겨주는 방법도 조금은 다르다.

history.push() 사용법

this.props.history.push({
  pathname: '/template',
  search: '?query=abc',
  state: { detail: response.data }
})

Link 사용법

<Link to={{
      pathname: '/template',
      search: '?query=abc',
      state: { detail: response.data }
    }}> My Link </Link>