笔记react router 4(一)

  用过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

如此一来,你便可以在其生命周期钩子函数中为所欲为!

上一篇:[bzoj1833][ZJOI2010]count 数字计数——数位dp


下一篇:数位dp初探