[解決済み] RouteComponentPropsとカスタムpropsを使用したreactルーティング

質問

この問題で頭がおかしくなりそうです。

まず、私はまだReactの初心者です。次に、投稿する前に、私は試してみました。 react-router v4でルーターコンポーネントにカスタムpropsを渡す そして react 子コンポーネントがpropsを受け取らない

しかし、うまくいきません。

私が達成しようとしているのは、既存のReactプロジェクトにルーティングを追加するだけです。

例えばトップ（父）クラスはこんな感じです。

import * as React from "react";
import { RouteProps } from "react-router";
import { IAppSettings, IAppConfig, IDataAccess } from "../interfaces";
import { AppConfig } from "../appconfig";
import { DataAccess } from "../DataAccess";
import { BookingSiteOverview } from "./BookingSiteOverview";

import { Layout } from "./Layout";
import { NavigationMenu } from "./NavigationMenu";
import { BrowserRouter as Router, Route, Link, Switch, Redirect } from "react-router-dom";
import { RouteComponentProps } from "react-router-dom";

    export class CJV extends React.Component<RouteComponentProps<{}>, {}> {
        private appConfig: IAppConfig;
        private dataAccess: IDataAccess;

        constructor() {
            super();

        const config: IAppSettings = require("Config");

        AppConfig.apiUrl = config.ApiUrl;

        this.appConfig = new AppConfig();
        this.dataAccess = new DataAccess(this.appConfig);
        this.dataAccess.getProfiles = this.dataAccess.getProfiles.bind(this);
    }

    public render() {
        return <div>
            <Layout>
                <NavigationMenu />

                <Switch>
                    <Redirect exact={true} from="/" to="/BookingSiteOverview" />
                    <Route path="/BookingSiteOverview" exact render={(props) =>
                        (<BookingSiteOverview getProfiles={this.dataAccess.getProfiles} {...props} />)} />
                </Switch>


 </Layout>;
        </div>;
    }

注：エラーは getProfiles={this.dataAccess.getProfiles} プロパティ 'getProfiles' はタイプ 'Readonly<{ children?'に存在しません。ReactNode; }> & Readonly>' にプロパティ 'getProfiles' が存在しません。

子クラスです。

 import * as React from "react";
import { ProgressSpinner } from "primereact/components/progressspinner/ProgressSpinner";
import { RouteComponentProps } from "react-router-dom";

import { IBookingSiteOverviewState, IBookingSiteOverviewProps } from "../interfaces";
import { ProfileSelection } from "./ProfileSelection";
import { DateRangeSelection } from "./DateRangeSelection";
import { CollectionStatsTable } from "./CollectionStatsTable";
import { IBookingSiteCollectionStat, ICollectionStatHiddenColumnDefinition } from "../models";

export class BookingSiteOverview extends React.Component<RouteComponentProps<{}>, IBookingSiteOverviewState> {
    private stats?: IBookingSiteCollectionStat[];

    constructor(props: IBookingSiteOverviewProps) {
        super();

    this.state = { statsLoading: false, applyButtonPressed: false };
}

public render() {
    const statsTable = this.state.statsLoading
        ? <ProgressSpinner />
        : <CollectionStatsTable
            id="booking-site-stats"
          getRowDefinition={this.props.getProfiles} 
//<---- Displays error:     Property 'getProfiles' does not exist on type 'Readonly<{ children?: ReactNode; }> & Readonly<RouteComponentProps<{}>>'.

            stats={this.stats}
            statKey="bookingSiteId"
            rowExpansionTemplate={this.props.getProfiles}
            tableWidth="1341px" />;

    const statsSection = this.state.applyButtonPressed ? statsTable : "";

    return <div>
        {statsTable}
    </div>;
}

}

カスタムプロップとリアクトルーティングプロップをどのように渡せば、ルーティングが機能し、子クラスがそのプロパティを受け取ることができるのかがわかりません。

どうすればいいですか？

TypescriptにおけるReactコンポーネントは、このように定義されます。

class ComponentName extends React.Component<PropsType, StateType> { ... }

この場合、BookingSiteOverview は RouteComponentProps<{}> 型のプロップを受け入れ、IBookingSiteOverviewState 型のステートを使用します。

RouteComponentProps<{}>にはgetProfilesの定義がないので、それがエラーの原因になっています。

EDIT

getProfilesはIBookingSiteOverviewPropsで定義されています（OPによる）ので、BookingSiteOverviewのpropsを次のように変更します。 RouteComponentProps<{}> & IBookingSiteOverviewProps は問題を解決します。

export class BookingSiteOverview extends React.Component<RouteComponentProps<{}> & IBookingSiteOverviewProps, IBookingSiteOverviewState> {
    constructor(props: RouteComponentProps<{}> & IBookingSiteOverviewProps) {
        super(props);
        ...
    }
    ...
}