笔记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

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

转载于:https://www.cnblogs.com/zyl-Tara/p/9685383.html