[react.js] react-router v4 browserHistory.push 오류 해결 방법

react-router v4  browserHistory.push 오류 해결 방법

리엑트 라우터가 버전3에서 버전4로 올라감에 따라 

엄청나게 많은 것들이 변했다.

지금 새로운 프로젝트를 만들고 새로운 버전의

패키지들을 받은 후 코딩을 하려면 불과 한달전에 공부했던 코드들이 동작하지 않게 되었다.

망할.. 예전 webpack 버전1에서 2버전으로 올라가면서 바뀐거 찾아내느라 생고생 했는데

이젠 react-router가 문제다

Link를 사용하지 않고 바로 함수 내에서 리다이렉트를 시키는 방법으로

v3에서는 

browserHistory.push('/');

이렇게 사용 하였으나

v4에선

Uncaught (in promise) ReferenceError: browserHistory is not defined

브라우저 콘솔창에 위와 같은 에러 메세지가 나타난다.

해결방법

생각보다 간단했다. 위의 코드 대신에

this.props.history.push('/');

이렇게 사용해주면 된다.

물론 상단에 리엑트 라우터를 임포트시킬 필요는 없다.

그냥 기능이 넘어와 버린건지 정확하게는 알 수 없지만

깃터브를 뒤져보니 아래와 같은 의견을 찾았다.

걍 이전버전에서는 됐는데 v4에선 안된다 라는 말 같다.

@wyze @timdorr first of all thanks for the v4. I have a few questions and I could not find any solutions for this anywhere, so asking here.

In the earlier versions of the react-router, we could push the the URL using browserHistroy.push() method. When you use browserHistroy the query which you pass, will be transformed to the search key in the history object. The below is an example which used to work in earlier versions.

let query = {
  reportType: 'summary',
  timeZone: 'UTC'
}

  browserHistroy.push({
    pathname: 'some_path',
    query
  })

This will resolve the URL to - test.com/some_path/?reportType=summary&timeZone=UTC

In the current version (v4), it is not possible to pass the query object to the history.push() method.

  histroy.push({
    pathname: 'some_path',
    query
  })

This will resolve the URL to - test.com/some_path/

How to get this working with v4.