react编程式导航和声明式导航(核心寻找路由对象)

<link> 和<NavLink> 实现路由的跳转 是声明式导航

通过js路由对象的方式叫做编程式导航 push replace go 

路由对象只有被router处理过之后或者用WithRouter高阶组件处理过后才有

编程式导航:

1 push                           props.history.push('/singer')

2 replace                       props.history.replace({pathname:'/singer'})

3 go                               props.history.go(-1)  //返回

4 goback                       props.history.goBack()   //返回

5 goforward                   props.history.goForward()  //前进

WithRouter  :是一个函数,接收一个组件作为参数,返回一个新组件,在新组件里的props里会被注入路由对象 

WithRouter 作用处理一个组件给处理的组件添加路由对象 

注意:正常的组件是没有路由对象的 ,两和方式获取路由对象 

1 通过Route 处理过的组件在props里有路由对象

2 通过WithRouter处理过的组件也有路由对象

import {withRouter} from 'react-router-dom'  //引入

let NewComponent =WithRouter(CustomNav)//处理组件

export default NewComponent

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 路由 正常的组件内部是没有路由对象的 被路由处理过的组件才有路由对象 BrowserRouter HashRout...
    jie_han阅读 1,774评论 0 0
  • React-Router v4 1. 设计理念1.1. 动态路由1.2. 嵌套路由1.3. 响应式路由 2. 快速...
    wlszouc阅读 12,724评论 0 14
  • React Router 4.0 (以下简称 RR4) 已经正式发布,它遵循React的设计理念,即万物皆组件。所...
    world_7735阅读 5,412评论 0 2
  • React Router 4.0 (以下简称 RR4) 已经正式发布,它遵循React的设计理念,即万物皆组件。所...
    梁相辉阅读 97,851评论 24 195
  • 路由的安装和引入 安装cnpm i react-router-dom -S 引入hash路由:HashRouter...
    鹤仔z阅读 15,306评论 0 9