react+typescript 类后面的不设置泛型this.props.match就提示错误

Question

刚学typescript
用ts+react_react-router创建项目在使用react-router的this.props.match时遇到以下问题，希望大神指点：

react+typescript 类后面的不设置泛型this.props.match就提示错误
不存在match属性

在constructor参数设置props类型为IProps也无效.

    import * as React from 'react'
import './index.less'

interface IProps {
    match?: any
}
export default class Home extends React.Component {
    constructor(props:IProps) {
        super(props)
    }
    public componentDidMount() {
        // react-router match 获取url上的参数
        console.log('url 参数:', this.props.match) 
    }
    public render () {
        return (
            <div className="home-wrap">
                欢迎使用, XXX管理系统
            </div>
        )
    }
}

Answer 1

@types/react-router 必须安装
在V4中 你要使用 H5 的跳转的时候需要在 组件中使用 withRouter
在Ts中，你需要在Props接口中继承 RouteComponentProps 这个接口:

interface Props extends RouteComponentProps { }
export default withRouter(Index);

以上组件之后,你便可使用this.props.hoisty.push() js 跳转 和 <Link /> 组件中实现跳转
如果你使用的需要在路由中使用的Parmas参数的话，比就需要在定义一个接口 RouterInfo,
并且修改为一下:

interface RouterInfo {
  id: any
}
interface Props extends RouteComponentProps <RouterInfo >{ }

这样的话你在编译的时候就不会出现出行this.props.match.params.id没有找到Id问题
这里的params 适用于:

<React path='goodsList/:id.html' />

Answer 2

肯定要设置泛型的啊，不设置当然报错

Answer 3

export default class Home extends React.Component<RouteComponentProps>{
    ...
}

Answer 4

正确的写法是这样的：https://blog.kangfenmao.com/p...

Answer 5

这样写我感觉会比较好吧

interface IArticleProps extends RouteComponentProps {
  match: {
    isExact: boolean
    params: { id: any }
    path: string
    url: string
  }
}

class Article extends React.Component<IArticleProps> {