美文网首页
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