美文网首页
react-router中withRouter的作用

react-router中withRouter的作用

作者: louiebb | 来源:发表于2020-06-30 10:07 被阅读0次
  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'
]

相关文章

网友评论

      本文标题:react-router中withRouter的作用

      本文链接:https://www.haomeiwen.com/subject/uzytqktx.html