zoukankan      html  css  js  c++  java
  • 笔记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

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

  • 相关阅读:
    LINQ Practice
    windows下python环境安装
    kafka安装教程
    使用python连接mysql/oracle
    使用百度地图实现地图网格
    单链表反转java代码
    mysql的索引问题分析
    java中String字符串的==解析
    辗转相除法的原理
    myeclipse2014新建maven项目
  • 原文地址:https://www.cnblogs.com/zyl-Tara/p/9685383.html
Copyright © 2011-2022 走看看