react中的withRouter

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

原创最新推荐文章于 2025-02-13 19:05:57 发布 · 131 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js

react 专栏收录该内容

13 篇文章

订阅专栏

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

//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)