或许,你觉得我麻烦,明明一篇文章可以搞定的内容,非要写几篇。是不是正在吐槽我?没关系,我的目的达到了。手动傲娇( ̄∇ ̄)

然后,我们就要来聊一聊withRouter了。

我们都知道,当我在访问路由配置文件中的组件,通常我们称之为路由组件时,可以从他的props中访问到路由对象。如,location。但是,没有声明在路由中的组件,通常我们称之为非路由组件,比如路由组件中我们使用到的外部组件时,我们需要用到路由对象该怎么办呢?

在3.X中,我们要在非路由组件中使用history对象,需要手动引入history,就像这样,

import createHistory from 'history/createBrowserHistory'
const history = createHistory()

或者,我们在路由组件中将获取到的路由对象手动传递给外部组件。

<Parent>
<Child routeProps = {this.props.location} />
</Parent>

再或者,我们可以使用H5的history API。

window.location

但是4.X中我们可以不用那么麻烦了,直接一个withRouter包裹你的外部组件,即可通过props访问到location, router及history等对象。

就像这样,

import React from 'react'
import PropTypes from 'prop-types'
import { withRouter } from 'react-router' class ShowTheLocation extends React.Component {
static propTypes = {
match: PropTypes.object.isRequired,
location: PropTypes.object.isRequired,
history: PropTypes.object.isRequired
} render() {
const { match, location, history } = this.props return (
<div>You are now at {location.pathname}</div>
)
}
} const ShowTheLocationWithRouter = withRouter(ShowTheLocation)
来自:https://reacttraining.com/react-router/web/api/withRouter

  接着再来看, component.WrappedComponent

// MyComponent.js
export default withRouter(MyComponent) // MyComponent.test.js
import MyComponent from './MyComponent'
render(<MyComponent.WrappedComponent location={{...}} ... />)

它用于创建一个包装组件上,通常用于测试。

  wrappedComponnetRef这个函数的作用是refs获取组件实例。

class Container extends React.Component {
componentDidMount() {
this.component.doSomething()
} render() {
return (
<MyComponent wrappedComponentRef={c => this.component = c}/>
)
}
}

笔记react router 4(五)的更多相关文章

  1. 笔记react router 4(二)

    上一篇我们提到react router 4的dom特性.那么这一次,我们来说一说4.X中的路由组件嵌套. 用过3.X的同学应该知道,路由组件的嵌套(即,路由的配置)方式是通过给<Route> ...

  2. 笔记react router 4(四)

    看完Router的变化,接着来说<Switch>组件. 在3.X中,你可以指定很多子路由,但是只有第一个匹配的路径才会被渲染. 就像这样, <Route path='/' compo ...

  3. 笔记react router 4(三)

    上一篇我们说到了路由组件的嵌套.想必你已经运用自如了.那么,这一次我们来聊一聊4.X中Router的变更. 在3.X中我们若使用路由的模式,可通过在Router上配置history的值即可. 例如, ...

  4. 笔记react router 4(一)

    用过react router4.X的小伙伴一定知道,比起3.X的版本,router的使用上有了很大的改变. 首先,我们只需要安装 react-router-dom 即可使用.看到“dom”想必你就该知 ...

  5. React Router学习笔记(转自阮一峰老师博客)

    React Router是一个路由库,通过管理URL来实现组件切换和状态转变. 1.安装和使用 $ npm install -S react-router 在使用时,作为React组件导入 impor ...

  6. React Router V4.0学习笔记

    最近在学习React Router,但是网站的教程多半还是3.X版本之前的,所以我只能在GitHub上找到React Router的官方文档在读.后来总结了一下,包括学习经验以及V3.X与V4.X的差 ...

  7. [转] React Router 使用教程

    PS:react-route就是一个决定生成什么父子关系的组件,一般和layout结合起来,保证layout不行,内部的子html进行跳转 你会发现,它不是一个库,也不是一个框架,而是一个庞大的体系. ...

  8. React Router 使用教程

    一.基本用法 React Router 安装命令如下. $ npm install -S react-router 使用时,路由器Router就是React的一个组件. import { Router ...

  9. React Router API文档

    React Router API文档 一.<BrowserRouter> 使用HTML5历史记录API(pushState,replaceState和popstate事件)的<Rou ...

随机推荐

  1. oracle函数之 minus

    “minus”直接翻译为中文是“减”的意思,在Oracle中也是用来做减法操作的 Oracle的minus是按列进行比较的,所以A能够minus B的前提条件是结果集A和结果集B需要有相同的列数,且相 ...

  2. 数据库04_SQL简单实践

    笔试实例 以MySQL为例,制作一个简单的表profit如下: T1 分别求1991年以及1992年第一季度的金额总和,效果如下: sql语句实现: SELECT year, SUM(amount) ...

  3. WEB 安全学习 一、mysql 注入漏洞

    转载: https://www.cnblogs.com/cui0x01/p/8620524.html 一.Mysql数据库结构 数据库A 表名 列名 数据 数据库B 表名 列名 数据 Mysql5.0 ...

  4. 19. --mus-- 音乐,娱乐(词20)

  5. Jmeter 老司机带你一小时学会Jmeter

    Jmeter的安装   官网下载地址:http://jmeter.apache.org/download_jmeter.cgi 作为Java应用,是需要JDK环境的,因此需要下载安装JAVA,并且作必 ...

  6. Windows下Apache服务器搭建

    Apache HTTP Server(简称Apache)是Apache软件基金会的一个开放源码的网页服务器,是世界使用排名第一的Web服务器软件,可以在大多数计算机操作系统中运行,由于其多平台和安全性 ...

  7. oracle的批量操作sql语句

    1.批量删除/批量更新 mapper: <update id="updatePrjStateByFPrjId" parameterType="string" ...

  8. java添加templates模板,httpServlet模板改写

    为了提高开发效率,通常将一些常用模板添加到快捷键,方法: window-prefrerences-java-editor-templates 代码复制进去apply应用即可 package com.l ...

  9. leecode第八十九题(格雷编码)

    class Solution { public: vector<int> grayCode(int n) { vector<int> res; res.push_back(); ...

  10. sort-选择排序

    void sort_select(vector<int> &v) { for(int i=0;i<v.size()-1;i++) { int min=v[i]; int in ...