typescript - ReactJS TS, Egenskapen 'match' finns inte på typen 'Readonly<{children?:ReactNode}> & Readonly'

Jag försöker skriva typen på mina komponentprops och använda en URL-parameter samtidigt. Jag får följande fel:

Egenskapen 'match' finns inte på typen 'Readonly<{children?: ReactNode}> & Readonly'

Här är en del av min kod:

import Api from '../../api/Api';

interface MyProps {
    api: Api
}

interface MyState {
    someString: string,
    loading: boolean
}

export class MyComponent extends React.Component<MyProps, MyState> {

    constructor(props: MyProps) {
        super(props);
        this.state = {
            someString: this.props.match.params.someString,//<-- Error is here on this line
            loading: true
        }
    }

    componentDidMount() {
        this.props.api.getSomeInfo(this.state.someString, this.callback)
    }

    callback() {
        let interval = setInterval(function () {
            this.setState({loading: false});
            clearInterval(interval)
        }, 3000);
    }

    render() {
        return (
            <div>
                <p>{this.someString}</p>
            </div>
        );
    }
}

Som du kan se är allt jag försöker göra:

1- Gå till:

http://localhost:8080/someStrings/:someString

2- Hämta värdet av :someString i min komponents konstruktor och lagra det i tillståndet

3- Använd värdet av someString i mitt state för att kunna skicka det som ett argument till mitt API-modul för att göra saker

4- När återuppringningen körs i API:t tar jag bort laddningsanimationen

Min fråga är i princip, hur deklarerar jag mina MyProps för att kunna uppnå detta?

Svar #1

Detta är en öppen fråga i typdefinitionen. https://github.com/DefinitelyTyped/DefinitelyTyped/issues/17355

Tillfällig lösning

import { RouteProps } from 'react-router';
import React from 'react';

interface MyProps {
    api: Api
}

interface MyState {
    someString: string,
    loading: boolean
}

class MyComponent extends React.Component<Props & RouteProps, State> // Pay attention here.
{
  // your code...
}

ref: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/17355#issuecomment-336022780

Svar #2

Så här löste jag det

import {RouteComponentProps} from 'react-router';
interface IMyProps {}

interface IReactRouterParams {
  roomName: string;
  username: string;
}
export class MyComponent extends React.Component<
  IMyProps & RouteComponentProps<IReactRouterParams> {
 
  constructor(props: any) {
    super(props);
    //everything works here
    const {roomName, username} = this.props.match.params;
  }
}

Relaterade artiklar