ReactRouter升級 v2 to v4

概述

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; 

參考資料: