使用TypeScript写React，如何使用React-router-dom相关的api

Question

先上代码：

import { RouteComponentProps } from 'react-router-dom'

const Login: React.FC<any> = ({ history }: RouteComponentProps) => {
    function handleSubmit() {
        history.push('/')
    }
   
    return (
        <div>
            <button onClick={handleSubmit}>登录</button>
        </div>
    )
}

上面的代码是能够正常工作的，但是使用了any，不是很好。所以我定义了一个接口：

import { RouteComponentProps } from 'react-router-dom'

interface Props {
  history: RouteComponentProps
}

const Login: React.FC<Props> = (props) => {
    function handleSubmit() {
        props.history.push('/')
    }
   
    return (
        <div>
            <button onClick={handleSubmit}>登录</button>
        </div>
    )
}

这样写了之后就报错了，ts的提示：Property 'push' does not exist on type 'RouteComponentProps<{}, StaticContext, any>'，

我换成这样的写法也是提示同样的错误：

import { RouteComponentProps } from 'react-router-dom'

interface Props {
  history: RouteComponentProps
}

const Login: React.FC<Props> = ({ history }) => {
    function handleSubmit() {
        history.push('/')
    }
   
    return (
        <div>
            <button onClick={handleSubmit}>登录</button>
        </div>
    )
}

难道是接口定义错了吗？

Answer 1

const Login: React.FC<RouteComponentProps> = ({ history }) => {
    function handleSubmit() {
        history.push('/')
    }
   
    return (
        <div>
            <button onClick={handleSubmit}>登录</button>
        </div>
    )
}

Answer 2

interfacr Props extends RouteComponentProps {
  ...
}

或者

type Props = RouteComponentProps & { ... };

正常情况推荐第一种