使用 Typescript 反应路由器（函数类）

Question

我正在尝试带有 react 的 Typescript（以前从未工作过）。我解决了一个问题，但我不确定这是否是正确的方法。

所以我的反应路线看起来像这样

<Route exact path='/show/:id' component={ShowIssues} />

我解决的组件看起来像这样

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

interface RouteInfo extends RouteProps {
  params: {
    id: string;
  };
}

const ShowIssues = ({ match }: { match: RouteInfo }) => {
  const { params }: { params: { id: string } } = match;
  const { id }: { id: string } = params;

  return <div>time to show the issue {id}</div>;
};

export default ShowIssues;

本场比赛的道具解决了吗？令人惊讶的是，我几乎没有发现任何关于函数组件的信息（并且钩子即将到来，所以我想提出这个疑问是有道理的）。

我的另一个疑问是const { params }: { params: { id: string } } = match; 有没有办法可以重复使用RouteInfo，所以我不必输入两次？

谢谢！

Answer 1

const { params }: { params: { id: string } } 和 const { id }: { id: string } 类型是多余的，因为如果 match 输入正确，它们将被推断出来。

Route props 是具有match 属性RouteComponentProps 的特定类型的对象。它接受match.params 类型作为泛型参数。

应该是：

interface RouteInfo extends RouteProps {
    id: string;
}

const ShowIssues = ({ match }: RouteComponentProps<RouteInfo>) => {
  const { params } = match;
  const { id } = params;

  return <div>time to show the issue {id}</div>;
};