React Router v4의 변경 사항

React Router 버전이 4로 바뀌면서 많은 변화가 있었습니다.
공식 페이지도 바뀌었다.
https://reacttraining.com/react-router/web/guides/quick-start

import

이전에는 react-router부터 import을 시작하는 방법이었지만, v4 페이지와native는 분리되었다.
웹의 경우react-router-dom,native는react-router-native에서import의 규격으로 변경됩니다.

// v3
import { Route } from 'react-router'

// v4 : web
import { Route } from 'react-router-dom'
// v4 : native
import { Route } from 'react-router-native'

Router

로터도 큰 폭의 규격 변경을 진행했다.
저는 개인적으로 v4를 비교적 좋아합니다.

// v3
import React from 'react'
import { render } from 'react-dom'
import { 
  Router, 
  Route, 
  IndexRoute, 
  IndexLink,
  browserHistory 
} from 'react-router';

render(
  <Router history={browserHistory}>
    <Route path='/' component={App}>
      <IndexRoute component={Top} />
      <Route path='hoge' component={Hoge} />
    </Route>
  </Router>
)

// v4
import React from 'react'
import { render } from 'react-dom'
import {
  Route,
  BrowserRouter
} from 'react-router-dom'

render(
  <BrowserRouter>
    <div>
      <Route exact={true} path='/' component={Top}/>
      <Route path='hoge' component={Hoge}/>
    </div>
  </BrowserRouter>
)

매개 변수의 수용 방법

매개 변수의 수신 방법도 변경되었다.
지금까지props 바로 아래에 수치를 넣었고 v4는match에 파라미터를 넣었습니다.

// v3
import React, { Component } from 'react'

class Hoge extends Component {
  constructor(props) {
    super(props);
    // this.props.paramsにパラメーターが格納
    const params = this.props.params
  }

  render() {
    return (
      <div>Hoge</div>
    )
  }
}

// v4
import React, { Component } from 'react'

class Hoge extends Component {
  constructor(props) {
    super(props);
    // パラメーターはthis.props.match内に変更
    const params = this.props.match.params
  }

  render() {
    return (
      <div>Hoge</div>
    )
  }
}

총결산

나는 또 다른 변경점이 있다고 생각하지만, 나는 먼저 대체적으로 내가 수정한 변경을 총결하였다
파괴적인 변경도 있기 때문에 v3로 만든 물건을 강제로 담을 필요가 없다고 생각합니다.