React-一般组件、路由组件、WithRouter

路由组件和一般组件

路由组件和一般组建的区别

• 一般组件是程序员手动在代码里声明的
• 路由组件是在路由里注册，通过url路径匹配上进行访问的
• 一般组件在项目结构上，是放在components文件下的，路由组件是放在pages文件下的
• 以下两条仅针对V5，V6的props也是空对象
• 一般组件的props的内容取决于程序员传了啥，如果啥也不传，就啥也没有
• 路由组件的props，在通过路由表匹配上时，路由器给路由组件的props传递了history、location、match等

---

WithRouter

• 只有路由组件的props有history，可以使用this.props.history进行前进和后退
• WithRouter可以使一般组件也具有history的API
• withRouter可以加工一般组件，让一般组件具备路由组件所特有的API
• withRouter的返回值是一个新组件

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)
//withRouter可以加工一般组件，让一般组件具备路由组件所特有的API
//withRouter的返回值是一个新组件