一. withRouter 理解

withRouter 可以加工一般组件，让一般组件具备路由组件特有的 API 属性，会将history，location， match属性放到这个组件的props属性中。
withRouter的返回值是一个新组件。

二. withRouter 使用

import React, { Component } from "react";
// 引入 withRouter
import { withRouter } from "react-router-dom";class Header extends Component {// 回退back = () => {this.props.history.goBack();};// 前进forward = () => {this.props.history.goForward();};// 向前或向后跳转制定步数go = (num) => {this.props.history.go(num);};render() {console.log(123,this.props);return (<div className="page-header"><h2>导航栏</h2><button onClick={this.back}>回退</button>&nbsp;<button onClick={this.forward}>前进</button>&nbsp;<button onClick={() => this.go(2)}>前进2步</button>&nbsp;<button onClick={() => this.go(-2)}>后退2步</button></div>);}
}
// withRouter 包裹 Header 组件
export default withRouter(Header);

React - 一般组件 withRouter 的使用（让一般组件具备路由组件特有的API属性）相关推荐

React 路由组件详解
文章目录路由组件 1.HashRouter和BrowserRouter 2.Route 3.Router 4.Link和NavLink 5.Redirect 6.Switch 7.withRoute ...
reactjs通过lazy函数配合import函数动态加载路由组件
路由组件的lazyLoad //1.通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包const Login = lazy(()=>i ...
路由组件的lazyLoad
路由组件的lazyLoad //1.通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包 const Login = lazy(()=> ...
使用react 高阶组件withRouter
使用react 高阶组件withRouter withRouter 是一个高阶组件,把 match,location,history 三个对象注入到组件的 props 中.这是一个非常实用的函数 re ...
withRouter() 在非路由组件中使用路由库的api
我们知道,在非路由组件中,是拿不到例如像 this.props.location.pathname 数据. 倘若我们想拿到类似这种路由数据,可以使用withRouter()将非路由组件包装成路由组件 ...
React学习（6）—— 高阶应用：非受控组件
为什么80%的码农都做不了架构师?>>> 非受控组件使用非受控组件在大部分情况下,推荐使用受控组件来实现表单.输入框等状态控制.在受控组件中,表单等数据都有React组 ...
react组件放在数组中_为什么要在函数组件中使用React.memo？
这里提一下,如果大家看到这个标题有所疑惑的话,可以花点时间看一下本篇文章.反之呢如果是看到标题第一时间就反映出结论的话,就可以去get其他文章的知识点了那么接下来就不废话了,直接长刀直入,进入正题! ...
react 组件怎么公用_React、Redux与复杂业务组件的复用
All State In Redux 在上一篇文章[Redux的副作用处理与No-Reducer开发模式]中,我们介绍了如何使用Redux/Redux-Saga来进行组件的状态共享,以及副作用处理. ...
React路由组件传递参数
向路由组件传递参数 1.params参数路由链接(携带参数):<Link to='/demo/test/tom/18'}>详情</Link>注册路由(声明接收):<Rou ...

React - 一般组件 withRouter 的使用（让一般组件具备路由组件特有的API属性）

React - 一般组件 withRouter 的使用（让一般组件具备路由组件特有的API属性）

一. withRouter 理解

二. withRouter 使用

React - 一般组件 withRouter 的使用（让一般组件具备路由组件特有的API属性）相关推荐

最新文章

热门文章