笔记react router 4(五)
或许,你觉得我麻烦,明明一篇文章可以搞定的内容,非要写几篇。是不是正在吐槽我?没关系,我的目的达到了。手动傲娇( ̄∇ ̄)
然后,我们就要来聊一聊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(五)的更多相关文章
- 笔记react router 4(二)
上一篇我们提到react router 4的dom特性.那么这一次,我们来说一说4.X中的路由组件嵌套. 用过3.X的同学应该知道,路由组件的嵌套(即,路由的配置)方式是通过给<Route> ...
- 笔记react router 4(四)
看完Router的变化,接着来说<Switch>组件. 在3.X中,你可以指定很多子路由,但是只有第一个匹配的路径才会被渲染. 就像这样, <Route path='/' compo ...
- 笔记react router 4(三)
上一篇我们说到了路由组件的嵌套.想必你已经运用自如了.那么,这一次我们来聊一聊4.X中Router的变更. 在3.X中我们若使用路由的模式,可通过在Router上配置history的值即可. 例如, ...
- 笔记react router 4(一)
用过react router4.X的小伙伴一定知道,比起3.X的版本,router的使用上有了很大的改变. 首先,我们只需要安装 react-router-dom 即可使用.看到“dom”想必你就该知 ...
- React Router学习笔记(转自阮一峰老师博客)
React Router是一个路由库,通过管理URL来实现组件切换和状态转变. 1.安装和使用 $ npm install -S react-router 在使用时,作为React组件导入 impor ...
- React Router V4.0学习笔记
最近在学习React Router,但是网站的教程多半还是3.X版本之前的,所以我只能在GitHub上找到React Router的官方文档在读.后来总结了一下,包括学习经验以及V3.X与V4.X的差 ...
- [转] React Router 使用教程
PS:react-route就是一个决定生成什么父子关系的组件,一般和layout结合起来,保证layout不行,内部的子html进行跳转 你会发现,它不是一个库,也不是一个框架,而是一个庞大的体系. ...
- React Router 使用教程
一.基本用法 React Router 安装命令如下. $ npm install -S react-router 使用时,路由器Router就是React的一个组件. import { Router ...
- React Router API文档
React Router API文档 一.<BrowserRouter> 使用HTML5历史记录API(pushState,replaceState和popstate事件)的<Rou ...
随机推荐
- LuoguP2257 YY的GCD
题目描述 神犇YY虐完数论后给傻×kAc出了一题 给定N, M,求1<=x<=N, 1<=y<=M且gcd(x, y)为质数的(x, y)有多少对 kAc这种傻×必然不会了,于 ...
- P3980 [NOI2008]志愿者招募
思路 巧妙的建图 因为每个志愿者有工作的时段,所以考虑让一个志愿者的流量能够从S流到T产生贡献 所以每个i向i+1连INF-a[x]的边(类似于k可重区间集),每个si向ti连边cap=INF,cos ...
- P3121 [USACO15FEB]审查(黄金)Censoring (Gold)
吐槽 数据太水了吧,我AC自动机的trie建错了结果只是RE了两个点,还以为数组开小了改了好久 思路 看到多模板串,字符串匹配,且模板串总长度不长,就想到AC自动机 然后用栈维护当前的字符串位置,如果 ...
- GCN code parsing
GCN code parsing 2018-07-18 20:39:11 utils.py --- load data def load_data(path="../data/cora/ ...
- VHDL 例程
以下程序未经仿真,仅供说明 语法 声明参考库ieee,使用ieee中的std_logic_1164包全部条目可见 library ieee; use ieee.std_logic_1164.all; ...
- Linux安装Broadcom无线驱动
参考https://blog.csdn.net/u012833250/article/details/52493806 首先查看自己的网卡型号,然后先执行sudo apt-get update 再根据 ...
- JAVA基础之复识二
JAVA语言 未经本人允许禁止转载或使用 基础知识:JAVA数据类型,运算符,流程控制等 注释: // 单行注释 /* 多行连续注释 ... */ /** 文档注释,该类型的注释会生成一个html文件 ...
- OpenJDK 64-Bit Server VM warning: INFO: os::commit_memory(0x0000000083e80000, 1366294528, 0) failed;
我是在手动搭建nexus时遇到的 安装nexus时 启动命令的时候会报OpenJDK 64-Bit Server VM warning: INFO: os::commit_memory(0x00000 ...
- win10常用命令和设置总结
1.常用命令 exit:退出cmd面板; cls:清除cmd面板; 2.常用设置 2.1 services.msc 禁用:以后怎样都不会运行;手动:是打开某些用到它的程序要用到该服务时才会运行; 自动 ...
- 解决微信video全屏的问题,不在本页面播放
在微信浏览器中使用video标签,点击播放会跳出本页面,自动进行全屏播放,原因是自动跳转到手机微信内置的浏览器中去播放去了!!! 在video中加上连个属性就好了,反正最近的一个项目,我是这样做的就好 ...