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));

react withRouter的用法相关推荐

react useCallback的用法
useCallback是react中比较重要的一个hook useCallback 用来返回一个函数,在父子组件传参或者通用函数封装中,起到举足轻重的作用. 基础用法 useCallback的用法与u ...
React Hook的用法: State + Effect(一)
React Hook 简述 React Hook 是React 16.8 这个版本新增的一个特性.在此之前我们编写React组件一般大多数都是用 class组件,而非函数组件,因为函数组件不具有cla ...
react withRouter
解析react 高阶组件(withRouter) 最近正在学前端的react框架中的路由,觉得withRouter这一个高阶组件有点小难度,今天在这里总结了一下关于withRouter的一些主要操作和 ...
react ——withRouter——页面隐式传值—嵌套路由——渲染方式——自定义导航组件
withRouter import {Route,Switch,withRouter} from "react-router-dom" withRouter高阶组件增强组件--获取 ...
react withRouter和connect 同时使用的案例
在react中,如果遇到redux的connect 和一般组件跳转的withRouter 同时使用 ... import React from 'react'; import {connect} ...
【React】forwardRef 用法
文章目录基本用法基本用法 forwardRef:允许你的组件使用 ref 将一个 DOM 节点暴露给父组件. import { forwardRef } from 'react';const My ...
React.memo的用法
在线示例 https://codesandbox.io/s/myp00yr1xx?fontsize=14/react-memo 在使用function 作为statless组件的时候,我们通常是这样的 ...
React Hook的用法: Contex + Reducer(二)
React Hook 简述通过上篇文章我们知道使用 State Hook 和 Effect Hook 可以让函数组件也能够具有自己的状态和在组件的各个阶段提供钩子暴露给开发者使用(点击我查看 Sta ...
React 路由 Switch 用法
回顾: NavLink 与封装 Navlink 1: NvaLink 可以实现路由链链接的高亮, 通过activeClassName 指定样式; 2: 标签体的内容是一个特殊的标签属性; 3: 通过t ...

react withRouter的用法

react withRouter的用法相关推荐

最新文章

热门文章