What to declare react-router argument as in TypeScript

If you are using react-router v4 then import RouteComponentProps from react-router-dom and use type RouteComponentProps<RouteInfo> - the argument name must be a match

If you are using Typescript and React Router V 4.0 then the syntax is different.You declare your Route as following:

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

Then the Component is declared as following:

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);

Then inside your this.props.match.params you get fully IntelliSense in both VS Code and IntelliJ

First you need to import match from react-router-dom.

This is copy of my code generated from create react app:

import {    BrowserRouter as Router,    Route,    Link,    match} from 'react-router-dom';

You need an interface like this:

interface Identifiable {id: string; }

match is the thing which you need. Like this:

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