react withRouter的用法

withRouter的作用就是, 如果我们某个东西不是一个Router, 但是我们要依靠它去跳转一个页面, 比如点击页面的logo, 返回首页, 这时候就可以使用withRouter来做.withRouter, 作用是将一个组件包裹进Route里面, 然后react-router的三个对象history, location, match就会被放进这个组件的props属性中.（我的理解加上之后可以写编程时导航，不想vue可以在全局用this.$router.push(）来完成)

import React from 'react';
import { connect } from 'dva';
import  styles from  './nav.css'
import { Route, Switch, routerRedux,withRouter } from 'dva/router';dva写法
//import { withRouter } from 'react-router-dom'；//普通react项目写法

class Nav extends React.Component {
  
    jumping(){//跳转到
      this.props.history.push('/')
     console.log(this.props)
    }
    render() {
        return (
            <div className={styles.box}>
              <div className={styles.navBox}>
                 <div className={styles.iconBox}>
                   <div className={styles.iconImg}></div>
                   <div className={styles.title}>公路地质灾害时空数据监测预警系统</div>
                 </div>
                 <div className={styles.listBox}>
                 <div className={styles.listItem} onClick={this.jumping.bind(this)}>动态多维可视化子系统</div>
                 <div className={styles.listItem}>灾害多源监测数据存储子系统</div>
                 <div className={styles.listItem}>灾害监测预警子系统</div>
                 <div className={styles.listItem}>多源信息智能服务子系统</div>
                 </div>
              </div>
            </div>
        );
    }
}
export default withRouter(Nav);

这个例子中点击div利用history跳转到别的页面。没加withRouter时，this.props里没有history,加上之后才有。

如果withRouter和connect一起用一定把withRouter写外面。

export default   withRouter(connect(({ menu, mapindex }) => ({ menu, mapindex }))(TopMenu));