withRouter是react-router的一个高阶组件，可获取history
render时会把match, location和history传入props
用法1
import React,{Component} from 'react'
import {withRouter} from 'react-router-dom'
class App extends Component{
console.log(this.props); // {match: {…}, location: {…}, history: {…}…}
render(){
return (<div className='app'></div>)
}
}
export default withRouter(App);
用法2
import React,{Component} from 'react'
import {withRouter} from 'react-router-dom'
@withRouter
class App extends Component{
console.log(this.props); // {match: {…}, location: {…}, history: {…}…}
render(){
return (<div className='app'></div>)
}
}
export default App;
- 注释
@withRouter 属于装饰器语法需要额外配置
执行：npm install babel-plugin-transform-decorators-legacy --save-dev
具体实现请查看react @装饰器相关文档
脚手架的在packag的babel中配置
{
"plugins":[
"transform-decorators-legacy"
]
}
非脚手架的在webpack.config.js的jsx语法babel-loader中配置
plugins: [
'transform-decorators-legacy'
]
