react中的withRouter

最新推荐文章于 2025-02-13 19:05:57 发布

閉丄眼聆厛倖輻

最新推荐文章于 2025-02-13 19:05:57 发布

阅读量118

点赞数

CC 4.0 BY-SA版权

分类专栏： react 文章标签： react.js

本文链接：https://blog.youkuaiyun.com/weixin_52005030/article/details/120143116

react 专栏收录该内容

13 篇文章

订阅专栏

这篇博客介绍了如何利用`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)