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

先上代码:

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

难道是接口定义错了吗?

阅读 426
评论 2019-12-29 提问
    2 个回答
    const Login: React.FC<RouteComponentProps> = ({ history }) => {
        function handleSubmit() {
            history.push('/')
        }
       
        return (
            <div>
                <button onClick={handleSubmit}>登录</button>
            </div>
        )
    }
    评论 赞赏 2019-12-30
      原罪
      • 2.9k
      interfacr Props extends RouteComponentProps {
        ...
      }

      或者

      type Props = RouteComponentProps & { ... };

      正常情况推荐第一种

      评论 赞赏 2019-12-30
        撰写回答

        登录后参与交流、获取后续更新提醒