用过react router4.X的小伙伴一定知道,比起3.X的版本,router的使用上有了很大的改变。
首先,我们只需要安装 react-router-dom 即可使用。看到“dom”想必你就该知道,4.X中Route作为一个真正的组件供我们去使用,而3.X中的Route并非一个组件,而是作为路由的配置对象。
因此,3.X中你看到形如这样的代码,
<Route path="/home" component={Home} />
实际上,代表的意义是,
{
path: "/home",
component: Home
}
而4.X中,Route将具有一个组件全部的特性,因为它就是一个真正的组件!(这里貌似废话了^_^)
它具有三个render方法
// 组件在路由匹配时渲染,包含路由的props
<Route component={() => <Com/>} />
// 这个方法方便路由的嵌套和包装,可接收所有与渲染相关的所有props
<Route render={() => <Com />} />
// 接收路由相关的props及其他与渲染相关的props
<Route children={() => <Com />} />
那么,我们的路由组件就具有了与普通react组件相同的行为,例如生命周期。
3.X中我们使用onEnter、onUpdate及onLeave三个路由钩子函数来对路由进行一些操作,例如路由守卫的实践。
4.X中我们将不再使用这些钩子函数,而是用相应的生命周期钩子函数代替。
具体的:
使用componentDidMount或componentWillMount来代替onEnter,
使用componentDidUpdate 或 componentWillUpdate来代替onUpdate,
使用componentWillUnmount来代替onLeave
如此一来,你便可以在其生命周期钩子函数中为所欲为!