ReactRouter升级 v2 to v4

概述

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

V4 汲取了很多思想，路由即是组件，使路由更具声明式，且方便组合。如果你习惯使用 react ，那么一定会很快上手新版的 react-router 。http://www.tuicool.com/articles/uIveAfI

react-router V4 被一分为三: react-router-dom (for web)、 react-router-native (for native)、 react-router (core)。但如果仅在浏览器中使用的话，一般只需要用到 react-router-dom 就可以了。

改动点

1. Router/Route 的改变

// V2 or V3import { 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 V3import { Link } from 'react-router';// V4import { Link } from 'react-router-dom';

5. history.push and history.replace

// V2 or V3history.push({    pathname: '/home',    query: {        foo: 'test',bar: 'temp'    }});history.replace({    pathname: '/home',    query: {        foo: 'test',bar: 'temp'    }});// V4history.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// V4this.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的actionthis.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 官方文档