reactjs - Hva man skal erklære react-router-argument som i TypeScript

Jeg prøver å sette opp react-router med Typescript på en måte som godtar en parameter.

I mitt render-element har jeg

<Route path="/show/:id" component={TestComp} />

Og jeg definerer TestComp som

const TestComp = ({ match }) => (
    <div>
        <h2>Showing specified ID: {match.params.id}</h2>
    </div>
)

Imidlertid understreker VS Code match-parameteren (i deklarasjonen av TestComp) og forteller meg

Bindeelementet 'match' har implisitt typen 'any'.

og det feiler å kompilere.

Kan noen fortelle meg hvilken type match bør deklareres som? Jeg har prøvd RouteProps, men det fungerer heller ikke. Når jeg ser i index.d.ts, tror jeg det er definert som match<P>, men jeg er ikke sikker på hvordan man deklarerer en parameter som en generisk type.

OPPDATERING
Basert på kommentarene til @TarasPolovyi sitt svar, har jeg lagt til følgende:

Som du kan se, har dette fortsatt problemer.

Svar #1

Hvis du bruker react-router v4, importér RouteComponentProps fra react-router-dom og bruk typen RouteComponentProps<RouteInfo> - argumentnavnet må være match

Svar #2

Hvis du bruker Typescript og React Router V 4.0, er syntaksen annerledes. Du erklærer ruten din som følger:

<Route path="/home/:topic?" render={() => {
   return this.renderView(<ContentHolder />);
}} />

Da blir komponenten erklært som følger:

interface RouteInfo {
    topic: string;
}

interface ComponentProps extends RouteComponentProps<RouteInfo> {
}

class ContentHolder extends Component<ComponentProps> {

    render() {
        return (
            <Content>
                <h1 className="page-title">{this.props.match.params.topic}</h1>
            </Content>
        );
    };
};

export default withRouter(ContentHolder);

Da får du full IntelliSense inne i this.props.match.params både i VS Code og IntelliJ

Relaterte artikler