如何将 Typescript 与 React Router 一起使用并进行匹配

Question

方法

我正在尝试了解 Typescript 和 React Router。我一直在挣扎……

我目前收到错误：

类型“RouteComponentProps'.ts(2339)"`

上不存在属性“params”

import React from "react";
import { RouteComponentProps } from "react-router-dom";

const TopicDetail = ({ match }: { match: RouteComponentProps }) => {
  return (
    <div>
      <h3>{match.params.topicId}</h3>
                 ~~~~~~
    </div>
  );
};

export default TopicDetail;

你看，没有错误！

我可以通过定义我自己的interface 来消除错误，但不知何故我觉得这样做是错误的：

import React from "react";

interface Props {
  params: any;
}
const TopicDetail = ({ match }: { match: Props }) => {
  return (
    <div>
      <h3>{match.params.topicId}</h3>
    </div>
  );
};

export default TopicDetail;

Answer 1

为路由器参数 props 定义一个接口是推荐的方法，尽管您可以更明确地使用接口声明。当你为你的组件声明 props 的接口时，你可以extend RouteComponentProps 并使用你特定的 params 接口作为类型变量。

例如：

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

interface RouterProps { // type for `match.params`
    topicId: string; // must be type `string` since value comes from the URL
}

interface TopicDetailProps extends RouteComponentProps<RouterProps> {
    // any other props (leave empty if none)
}

const TopicDetail: React.FC<TopicDetailProps> = ({ match }) => {
    return (
        <div>
            <h3>{ match.params.topicId }</h3>
        </div>
    )
}

export default withRouter(TopicDetail);