Проблема с типами при использовании withRouter и Typescript

Начиная с документация, withRouter будет передавать обновленные реквизиты match, location и history обернутому компоненту при каждом его рендеринге.

Поэтому компонент MenuItem должен иметь реквизиты для их получения. На данный момент компонент MenuItem имеет реквизиты типа ISection, которые не включают реквизиты маршрутизатора.

Самый простой способ добавить реквизиты маршрутизатора — пересечь ISection с RouteComponentProps.

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

// ...
class MenuItem extends React.Component<ISection & RouteComponentProps> {

Полный код

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

interface ISection {
    id: number;
    title: string;
    imageUrl: string;
    size: string;
}

class MenuItem extends React.Component<ISection & RouteComponentProps> {
    render() {
        return (
            <div className = {`${this.props.size} menu-item`}>
                <div
                    className = "background-image"
                    style = {{ backgroundImage: `url(${this.props.imageUrl})` }}
                />
                <div className = "content">
                    <h1 className = "title">{this.props.title}</h1>
                    <span className = "subtitle">some subtitle</span>
                </div>
            </div>
        );
    }
}

export default withRouter(MenuItem);

И ответы на ваши вопросы

1. Почему написано "тип" typeof MenuItem"? Разве он не должен просто указать тип «MenuItem» вместо функции для получения типа?

   Ошибка возникла из-за несовместимости типов. MenuItem — это класс, а не тип. Чтобы получить тип MenuItem, вы должны использовать typeof MenuItem. Итак, typeof MenuItem — это тип. И компилятор правильно говорит "наберите typeof MenuItem".

2. Нужно ли, чтобы withRouter работал с классовыми компонентами, или он также работает с функциональными компонентами?

   Допускается работа с классовой составляющей и с функциональной составляющей.

   Вот как будет выглядеть ваш компонент, если он реализован как функциональный

   const Cmp1: React.FunctionComponent<ISection & RouteComponentProps> = (props) => {
       return (
           <div className = {`${props.size} menu-item`}>
               <div
                   className = "background-image"
                   style = {{ backgroundImage: `url(${props.imageUrl})` }}
               />
               <div className = "content">
                   <h1 className = "title">{props.title}</h1>
                   <span className = "subtitle">some subtitle</span>
               </div>
           </div>
       );
   }
   
   const WrappedCmp = withRouter(Cmp1);
   

3. Нужно ли мне что-то connect() или сопоставлять реквизиты с состоянием? Если да, то почему?

   Нет, это не жесткое требование. connect является частью Redux, поэтому, если вы используете Redux, вы можете подключиться. Вот документация того, как использовать withRouter с connect. Но опять же, это не требуется.

4. И, наконец, как я могу это исправить?

   Уже ответил. Смотри выше :-)

Для тех, кто приходит сюда для Next.js, пересекайте интерфейс вашего реквизита вместе с WithRouterProps, вот так..

import { WithRouterProps } from "next/dist/client/with-router";

class MenuItem extends React.Component<IProps & WithRouterProps>