React-关于withRouter

react-router 提供了一个withRouter组件

withRouter可以包装任何自定义组件，将react-router 的 history,location,match 三个对象传入.

无需一级级传递react-router 的属性，当需要用的router 属性的时候，将组件包一层withRouter，就可以拿到需要的路由信息.

如果是route直接的component的对象,是不需要加载withRouter的.如果只加载到其中的组件,则需要加上withRoute.

假如有个需求，是面包屑或者导航组件里需要拿到this.props.location（导航组件或者面包屑一般不会包裹在Route里吧），那么直接这么写显然就不行了。这个时候withRouter修饰一下，就可以这么写了。

正如下面代码所示,Route中的component中的IndexAsync是不需要加上withRoute,而IndexAsync中加载进来的组件,则是需要加载withRouter

        <Router><div><Switch><Route exact path={PATH.DEFAULT} component={IndexAsync}/><Route path={PATH.HOME} component={IndexAsync}/><Route><Redirect to={PATH.DEFAULT}/></Route></Switch></div></Router>

如果我加载了一个PlaceHolder的组件,并且加载到IndexAsync中,则需要通过withRouter 来进行修饰,来获取props中的location和histrory对象

const mapStateToProps = state => {return {...state};
};export default withRouter(connect(mapStateToProps)(Placeholder));

React-关于withRouter相关推荐

react之withRouter的作用
withRouter的作用:把不是通过路由切换过来的组件,将react-router的history.location和match三个对象传入到props对象上: 默认情况下必须是经过路由匹配渲染的组 ...
React之withRouter的作用和应用
1. withRouter的作用 withRouter是不通过路由跳转的组件,将history.locattion.math放在页面的props 对象中, 默认情况下,必须是经过路由匹配的组件才可以使 ...
React 路由报错 You should not use Route or withRouter() outside a Router
App.js在中的代码 import React, {Component , Fragment} from 'react'; import {withRouter , Route , Switch , ...
使用react 高阶组件withRouter
使用react 高阶组件withRouter withRouter 是一个高阶组件,把 match,location,history 三个对象注入到组件的 props 中.这是一个非常实用的函数 re ...
React - 一般组件 withRouter 的使用（让一般组件具备路由组件特有的API属性）
React - 一般组件 withRouter 的使用(让一般组件具备路由组件特有的API属性) 一. withRouter 理解二. withRouter 使用一. withRouter 理解 ...
React中的withRouter用法
withRouter withRouter的作用就是将该组件包裹进Route里面, 然后通过props就可以访问到history, location, match三个对象所以就可以依靠它进行页面跳转 ...
React-Router ---withRouter
import React from 'react' import { withRouter } from 'react-router' const Hello = (props) => { re ...
React Router路由详解
React Router路由详解一.基础 1.安装使用 2.React Router 中通用的组件路由组件 BrowserRouter 和 HashRouter 路径匹配组件: Route 和 S ...
React 折腾记 - (4) 侧边栏联动Tabs菜单-增强版(结合Mobx)
前言有小伙伴留言有前进后退没法联动的问题.我仔细梳理下了. 简化了代码逻辑和代码量,重写了一遍,执行逻辑和上个版本有所差异; 上个版本 :React 折腾记 - (3) 结合Mobx实现一个比较靠谱 ...
react antd confirm content list_react简单的项目架构搭建过程
前言 react官方推荐的脚手架create-react-app因为想给用户的最大自由度所以并没有像vue的脚手架那样生成的项目架构那么齐全,用这个写写demo还行,但是真正用在项目上还是不太合适的. ...

React-关于withRouter

React-关于withRouter相关推荐

最新文章

热门文章