react-router 사양 변경

react-router v1.x에서 v2까지.x로 업그레이드

v0.x에서 v1까지.x가 되었을 때 많은 일이 일어났다.근데 아직 많이 있는 것 같아.
본가의 홈페이지에v2.0.0 Upgrade Guide가 있습니다.
이에 따라 가장 큰 변경 사항은 다음과 같습니다.

router가 정의할 때history

를 지정해야 합니다

구성 요소 정의 시 믹스에서 History를 지정하지 않음

context로router

반복 사용
그래서 push State 같은 건 context야.router.push()를 결정했습니다.

지금까지의 설치 상태를 유지하면 콘솔에 경고가 표시되므로 다음 릴리즈부터는 사용할 수 없습니다

.
그렇습니다.

context

이전에는 리액트 공식 홈페이지에 context에 대한 기술이 없었지만 언제부터 추가됐는지 모르겠다.
https://facebook.github.io/react/docs/context.html
github의 이력을 조사한 결과 최초 제출은 2015년 10월 10일이었다.
정식적인 기술을 추가해 조건이 있어도 사용할 수 있도록 했다.

교통이 편리한 곳

context를 사용하지 않는 경우 부모가 자녀에게 값을 교부할 때 다음과 같다.

var Parent = React.createClass({
  :
  :
  render: function(){
    return (
      <Child param={this.state.param} />
    );
  }
});

var Child = React.createClass({
  render: function(){
    return (
      <div>{this.props.param}</div>
    );
  }
});

state와props를 사용하여 연결해야 합니다.
이걸 context로 바꾸면 아이에게 가격을 줄 필요가 없어요.

var Parent = React.createClass({
  getChildContext: function() {
    return {param: ''};
  },
  :
  :
  render: function(){
    return (
      <Child /> {/* contextの場合、値を渡す必要なし */}
    );
  }
});

var Child = React.createClass({
  render: function(){
    return (
      <div>{this.context.param}</div> {/* contextの値を参照 */}
    );
  }
});

남용하지 마세요.

공식 페이지에 주의사항이 있습니다.나는 적당히 번역했다.
Note:
context는 선진적이고 실험적인 기능이다.API는 향후 릴리즈에서 변경될 수 있습니다.
대부분의 응용 프로그램은 context를 사용할 필요가 없습니다.니가 리액션해.js 시작할 때 필요 없었죠?context를 사용하면 데이터의 흐름이 모호해지고 코드를 이해하기가 어려워집니다.응용 프로그램에서 context를 사용하면 state를 전역 변수로 받아들이는 것과 같습니다.
context를 사용할 필요가 있으면 조심하십시오
프로그램을 설치하든 프로그램 라이브러리를 설치하든 context의 사용을 작은 구역으로 분리하고 설치할 때 API를 직접 만지지 마십시오.만약 가능하다면 API가 바뀌어도 업그레이드 작업은 더욱 간단할 것이다.
듣건대웃기면 메모 남겨주세요.
레드ux를 쓰면 소용없을 것 같아서요.

react-router v1.기본 소스x기초로 수정해 봅시다

오늘부터 시리즈에 사용되는 소스, v2를 사용합니다.x기초로 수정해 보세요.

npm 설치

npm를 최신,react-router,history를 2.0.0으로 합니다.

$ sudo npm install npm -g
$ npm install [email protected] [email protected] --save

경고

나온다.

임시 수정

첫 번째 경고는 다음과 같습니다.

router가 정의할 때history

를 지정해야 합니다
그것 때문이겠지.공식 홈페이지에서
[ https://github.com/ReactTraining/react-router/blob/v2.0.0/upgrade-guides/v2.0.0.md#no-default-history )
Using Browser (HTML5 pushState) History
Using Custom Histories
상세한 기술이 있다.
그러므로 history를 가져옵니다.그런 다음 Router에게 맡깁니다.
index.js

var ReactRouter = require('react-router');
var Router = ReactRouter.Router;

var hashHistory = ReactRouter.hashHistory;
//browserHistoryの場合
//var browserHistory = ReactRouter.browserHistory;

:

ReactDOM.render(
  <Router history={hashHistory}>{Routes}</Router>,
  document.getElementById('content')
);

이어서 두 번째 경고 부분,

구성 요소 정의 시 믹스에서 History를 지정하지 않음

context로router

반복 사용
그래서 push State 같은 건 context야.router.push()를 결정했습니다. 변경합니다.원래 소스는...
index.js

var Top = React.createClass({
  mixins: [ History ],

  handleSubmit:function(e){
    e.preventDefault();
    /* ログイン処理 */

    //ポータルページへ
    this.history.pushState(null, '/portal');
  },
  render:function(){
    return (
      <div>
        <div className="main">
          <h1>ログイン</h1>
          <form onSubmit={this.handleSubmit}>
            <input placeholder="userid"/>
            <input placeholder="password"/>
            <div style={{textAlign:"center"}}>
              <button type="submit">ログイン</button>
            </div>
          </form>
        </div>
      </div>
    );
  }
});

이런 느낌이야.
그러므로

context의 정의.

mixins를 삭제합니다. [History]

this.history.pushState(null, '/portal');변경합니다.

필요
수정 후 다음과 같습니다.
index.js

var Top = React.createClass({
  contextTypes: {
    router: React.PropTypes.object.isRequired
  },
  handleSubmit:function(e){
    e.preventDefault();
    /* ログイン処理 */

    //ポータルページへ
    this.context.router.push('/portal'); //！！
  },
  render:function(){
    return (
      <div>
        <div className="main">
          <h1>ログイン</h1>
          <form onSubmit={this.handleSubmit}>
            <input placeholder="userid"/>
            <input placeholder="password"/>
            <div style={{textAlign:"center"}}>
              <button type="submit">ログイン</button>
            </div>
          </form>
        </div>
      </div>
    );
  }
});

상술한 수정의

this.context.router.push('/portal');

push State,replace State 등~State()는 공식 사이트에 있습니다.
Programmatic Navigation
를 참고하십시오.
path 이외의query를 지정하려면 대상을 통해 전달해야 합니다.

this.context.router.push({pathname: '/portal', query: '', state: ''});

매개변수 변경은 Link 어셈블리에서도 동일합니다.
공식 사이트의
<Link to>, onEnter, and isActive use location descriptors
중,query 형식으로 납품하시기를 원하신다면
V1.x

<Link to="/portal" query={{q: "hoge"}} style={{paddingRight: "5px"}}>ポータル</Link>

그러나
V2.x

<Link to={{pathname: "/portal", query: {q: "hoge"}}} style={{paddingRight: "5px"}}>ポータル</Link>

.
응.
context가 변경될 가능성이 있다면 결국 믹스나 래퍼를 직접 만들어야 할 것 같다.

전환 도구

공식 홈페이지에는 과도 도구를 사용하는 수정 방법에 대한 소개가 있다.
Upgrade Automatically with Codemods
그것에 근거하다
https://github.com/rackt/rackt-codemod
위에 적힌 방법으로 설치하고 도구를 이동한다고 적혀 있다.

$ sudo npm install -g jscodeshift
$ npm install rackt-codemod

공구를 시운전해 보다.아래의 느낌.

$ jscodeshift -t node_modules/rackt-codemod/transforms/history/deprecate-pushState-replaceState.js ./client/scripts/*

결과를 보았다

Processing 5 files...
Spawning 1 workers with 5 files each...
All done.
Results: 0 errors 4 unmodified 0 skipped 1 ok
Time elapsed: 1.99 seconds

이렇게1 파일 push State가 push로 수정되었습니다.다층적으로?
또한react-router/deprecate-context-history.실행도 해봤어요.
믹스 그냥.너랑 상관없어?

샘플 출처

https://github.com/kunitak/react-router-1to2/tree/v2