Реагировать маршрутизатор с Typescript (класс функции)

Question

Я пробую 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 был набран правильно.

Маршрутные реквизиты - это объекты с определенным типом, которые имеют свойство 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>;
};