react-router v4.0+ 的 withRouter

    首先，我们先来说说withRouter是做什么的，它主要是使非路由直连组件可以直接获取到路由的props（history、location、match等等）

    

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import { RouteComponentProps } from 'react-router';


type routerProps = RouteComponentProps<any>;

type IProps =
    & routerProps
    ;

class Index extends Component<IProps> {

    public render() {
      return (
            <Flex className="extra-package">
                
            </Flex>
      );
    }
}

export default withRouter(Index as any);

    由于我用了typescript 所以 我使用RouteComponentProps来配合withRouter；给他的的routerProps定义类型。如果有其他父组件传来的props也可以利用& 连接在一起；

    withRouter 包裹组件的时候  因为ts 所以要写成 Index as any

    不过目前这种方式好像不能接入父组件传来的props参数；

 

于是乎，我又试了一种方法

import { RouteComponentProps } from 'react-router';

interface iprops {
    test: string
}

interface RouterProps extends RouteComponentProps<void> {}
type IProps =
    & RouterProps
    & iprops
    ;

class Index extends Component<IProps> {
    public componentDidMount() {
        this.props.history;
    }
}

完美关联路由props和父组件传入的props