react中的withRouter

这篇博客介绍了如何利用`withRouter`高阶组件将路由操作的能力注入到React的普通组件中,通过`history`属性实现页面的前进、后退和跳转功能。示例展示了`Header`组件如何通过`withRouter`获取路由API并实现导航控制。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

//withRouter可以加工一般组件,让一般组件具备路由组件所特有的API

//withRouter的返回值是一个新组件

import {withRouter} from 'react-router-dom'

export default withRouter(Header)

import React, { Component } from 'react'
import {withRouter} from 'react-router-dom'

class Header extends Component {

	back = ()=>{
		this.props.history.goBack()
	}

	forward = ()=>{
		this.props.history.goForward()
	}

	go = ()=>{
		this.props.history.go(-2)
	}

	render() {
		console.log('Header组件收到的props是',this.props);
		return (
			<div className="page-header">
				<h2>React Router Demo</h2>
				<button onClick={this.back}>回退</button>&nbsp;
				<button onClick={this.forward}>前进</button>&nbsp;
				<button onClick={this.go}>go</button>
			</div>
		)
	}
}

export default withRouter(Header)

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值