笔记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 ...
随机推荐
- oracle函数之 minus
“minus”直接翻译为中文是“减”的意思,在Oracle中也是用来做减法操作的 Oracle的minus是按列进行比较的,所以A能够minus B的前提条件是结果集A和结果集B需要有相同的列数,且相 ...
- 数据库04_SQL简单实践
笔试实例 以MySQL为例,制作一个简单的表profit如下: T1 分别求1991年以及1992年第一季度的金额总和,效果如下: sql语句实现: SELECT year, SUM(amount) ...
- WEB 安全学习 一、mysql 注入漏洞
转载: https://www.cnblogs.com/cui0x01/p/8620524.html 一.Mysql数据库结构 数据库A 表名 列名 数据 数据库B 表名 列名 数据 Mysql5.0 ...
- 19. --mus-- 音乐,娱乐(词20)
- Jmeter 老司机带你一小时学会Jmeter
Jmeter的安装 官网下载地址:http://jmeter.apache.org/download_jmeter.cgi 作为Java应用,是需要JDK环境的,因此需要下载安装JAVA,并且作必 ...
- Windows下Apache服务器搭建
Apache HTTP Server(简称Apache)是Apache软件基金会的一个开放源码的网页服务器,是世界使用排名第一的Web服务器软件,可以在大多数计算机操作系统中运行,由于其多平台和安全性 ...
- oracle的批量操作sql语句
1.批量删除/批量更新 mapper: <update id="updatePrjStateByFPrjId" parameterType="string" ...
- java添加templates模板,httpServlet模板改写
为了提高开发效率,通常将一些常用模板添加到快捷键,方法: window-prefrerences-java-editor-templates 代码复制进去apply应用即可 package com.l ...
- leecode第八十九题(格雷编码)
class Solution { public: vector<int> grayCode(int n) { vector<int> res; res.push_back(); ...
- sort-选择排序
void sort_select(vector<int> &v) { for(int i=0;i<v.size()-1;i++) { int min=v[i]; int in ...