ReactRouter升级 v2 to v4
2017-07-08 10:50
471 查看
概述
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 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 官方文档
相关文章推荐
- ReactRouter升级 v2 to v4
- ReactRouter升级 v2 to v4
- ReactRouter升级 v2 to v4
- ReactRouter升级 v2 to v4
- react-router 4.2版本的升级
- 详解升级react-router 4 踩坑指南
- react-router 从 v2/v3 to v4 迁移
- react-router 4.0 升级攻略
- webpack-3 react-router-4 react-15.6 升级记录
- 详解升级react-router 4 踩坑指南
- react-router 从 v2/v3 to v4 迁移(翻译)
- react-router 4 升级攻略
- React-Router入门Demo
- react-router 0.X web 使用
- react-router+webpack+gulp路由实例
- React填坑之react-router刷新后报错解决方法
- react router animation example
- react+redux+router+webpack+immutable.js框架
- react-router 获取路由参数
- 谷歌地图V2升级到V3