概述

react-router V4 相对于react-router V2 or V3 几乎是重写了, 新版的react-router更倾向于组件化(everything is component)。

V4汲取了许多头脑，路由等于组件，使路由更具声明式，且轻易组合。假如你习气运用react，那末一定会很快上手新版的react-router。

react-router V4 被一分为三: react-router-dom(for web)、react-router-native(for native)、react-router(core)。但假如仅在浏览器中运用的话，平常只需要用到react-router-dom就能够了。

修改点

1. Router/Route 的转变

// V2 or V3
import { Router, Route, hashHistory } from 'react-router';

<Router history={hashHistory}>
  <Route path='/foo' component={Foo} />
  <Route path='/bar' component={Bar} />
</Router>

// V4 Router组件里只能衬着一个组件
import {
    HashRouter as Router,
    Route
} from 'react-router-dom';

<Router>
  <div>
    <Route path='/foo' component={Foo} />
    <Route path='/bar' component={Bar} />
  </div>
</Router>

2. 组件嵌套

// V2 or V3 路由组件嵌套
import { Router, Route, hashHistory } from 'react-router';

<Router history={hashHistory}>
  <Route path='/' component={App}>
    <Route path='foo' component={Foo} />
    <Route path='bar' component={Bar} />
  </Route>
</Router>

// V4 Router 的路由组件嵌套
import {
    HashRouter as Router,
    Route,
    Switch
} from 'react-router-dom';

<Router>
 <Route path="/" component={(props) => (
    <App {...props}>
      <Switch>
        <Route path='/foo' component={Foo} />
        <Route path='/bar' component={Bar} />
      </Switch>
    </App>
  )}/>
</Router>

3. 路由的生命周期

在react-router V4中去掉了on****的路由生命周期的钩子，然则你能够在组件顶用componentDidMount 或 componentWillMount 替代 onEnter，能够用componentWillUpdate 或 componentWillReceiveProps替代 onUpdate，你能够用componentWillUnmount 替代 onLeave。

4. Link

// V2 or V3
import { Link } from 'react-router';

// V4
import { Link } from 'react-router-dom';

5. history.push and history.replace

// V2 or V3
history.push({
    pathname: '/home',
    query: {
        foo: 'test',
bar: 'temp'
    }
});
history.replace({
    pathname: '/home',
    query: {
        foo: 'test',
bar: 'temp'
    }
});

// V4
history.push({
    pathname: '/home',
    search: '?foo=test&bar=temp',
});
history.replace({
    pathname: '/home',
    search: '?foo=test&bar=temp',
});

6. props.params

// V2 or V3 猎取params能够这么猎取
this.props.params

// V4
this.props.match.params

7. location.query

// V2 or V3 猎取query能够这么猎取
this.props.location.query

// V4 去掉了location.query，只能运用search来猎取，为了让其跟浏览器一样
// 假如想要兼容之前的location.query，能够运用query-string库剖析一下
// 如: queryString.parse(props.location.search)
this.props.location.search

8. location.action

// V2 or V3 猎取location的action
this.props.location.action

// V4 去掉了location.action, 放在了history内里
history.action

9.关于history

之前猎取react-router内里的history库，能够这么猎取:

import {hashHistory as history} from 'react-router';

react-router V4:

import createHashHistory as history from 'history/createHashHistory';

兼容处置惩罚

由于要从react-router V2完整迁徙到react-router V4工作量照样挺大的，一会儿难以完整迁徙，所以对某些处所做了兼容处置惩罚。

history

import _ from 'lodash';
import queryString from 'query-string';

function processHistory(history) {
    const _push = history.push;
    const _replace = history.replace;

    history.push = function (one) {
        if (!_.isPlainObject(one)) {
            return _push.apply(this, arguments);
        }
        const o = Object.assign({}, one);
        if (o.query) {
            o.search = queryString.stringify(o.query);
        }
        _push.apply(this, [o]);
    };

    history.replace = function (one) {
        if (!_.isPlainObject(one)) {
            return _replace.apply(this, arguments);
        }
        const o = Object.assign({}, one);
        if (o.query) {
            o.search = queryString.stringify(o.query);
        }
        _replace.apply(this, [o]);
    };

    return history;
}

export default processHistory;

props

import queryString from 'query-string';

const processReactRouterProps = (props) => {
    const newProps = Object.assign({}, props);
    newProps.location.query = queryString.parse(props.location.search);
    newProps.location.action = newProps.history.action;
    newProps.params = props.match.params || {}; // 不止 || 是不是有意义
    return newProps;
}
export default processReactRouterProps; 

参考资料:

react-router2 迁徙到 react-router4 关注点
react-router 官方文档