Taking this example route which takes a route param slug:

ROUTES.ts

export const SOME_ROUTE = `/some-route/:slug`;

And this <Switch> component that will render <Route>'s.

AllRoutes.tsx

import React from "react";
import * as ROUTES from "@routes/ROUTES";

interface AllRoutes {  
}

const AllRoutes: React.FC<AllRoutes> = (props) => {
  console.log("Rendering AllRoutes...");

  return(
    <Switch>
      <Route exact path={ROUTES.SOME_ROUTE} component={MyComponent}/>
    </Switch>
  );
};

export default AllRoutes;

And now from the rendered component:

MyComponent.tsx

import React from "react";
import HomePage from "./HomePage";
import { RouteComponentProps } from "react-router-dom";

interface MyComponent extends RouteComponentProps {
}

const MyComponent: React.FC<MyComponent> = (props) => {
  console.log("Rendering MyComponent...");

  console.log(props.match.params.slug);  // TRYING TO ACCESS THE `:slug` ROUTE PARAM

  return(
    <HomePage/>
  );
};

export default MyComponent;

QUESTION

I get an error saying that the slug property does not exist. Even though it 100% exists, 'cause the value gets logged. But Typescript is unaware of it.

Do I need to manually extend the RouteComponentProps to add that props.match.params.slug property?

The routeProps (history, match, location) are present as you can see from the picture below.

Taking this example route which takes a route param slug:

ROUTES.ts

export const SOME_ROUTE = `/some-route/:slug`;

And this <Switch> component that will render <Route>'s.

AllRoutes.tsx

import React from "react";
import * as ROUTES from "@routes/ROUTES";

interface AllRoutes {  
}

const AllRoutes: React.FC<AllRoutes> = (props) => {
  console.log("Rendering AllRoutes...");

  return(
    <Switch>
      <Route exact path={ROUTES.SOME_ROUTE} component={MyComponent}/>
    </Switch>
  );
};

export default AllRoutes;

And now from the rendered component:

MyComponent.tsx

import React from "react";
import HomePage from "./HomePage";
import { RouteComponentProps } from "react-router-dom";

interface MyComponent extends RouteComponentProps {
}

const MyComponent: React.FC<MyComponent> = (props) => {
  console.log("Rendering MyComponent...");

  console.log(props.match.params.slug);  // TRYING TO ACCESS THE `:slug` ROUTE PARAM

  return(
    <HomePage/>
  );
};

export default MyComponent;

QUESTION

I get an error saying that the slug property does not exist. Even though it 100% exists, 'cause the value gets logged. But Typescript is unaware of it.

Do I need to manually extend the RouteComponentProps to add that props.match.params.slug property?

The routeProps (history, match, location) are present as you can see from the picture below.

• javascript
• reactjs
• typescript
• react-router
• react-router-dom

• 2 Why don't you supply the expected parameters? Like RouteComponentProps<{ slug: string }>, presumably. Dupe of stackoverflow.com/q/50047977/3001761. – jonrsharpe Commented Aug 28, 2020 at 14:46
• Thanks for your reply. Something like this: interface MyComponent extends RouteComponentProps<{slug: string>} ? Won't I be overwriting other stuff by doing this? – cbdeveloper Commented Aug 28, 2020 at 14:47
• Overwriting what other stuff? MyComponent doesn't define anything else, it seems pointless; just use React.FC<RouteComponentProps<{ slug: string }>>. – jonrsharpe Commented Aug 28, 2020 at 14:49
• @jonrsharpe I mean other stuff defined in RouteComponentProps, that comes from @types/react-router-dom. – cbdeveloper Commented Aug 28, 2020 at 14:51
• What other stuff? What do you think the generic is for if not specifying the parameters? Look at the definition: github.com/DefinitelyTyped/DefinitelyTyped/blob/…. – jonrsharpe Commented Aug 28, 2020 at 14:54

1 Answer 1

With the help of the comments and these other contents:

• In ReactJS trying to get params but I get property 'id' does not exist on type '{}'
• And this article: Using typescript to write react-router 5

Here is how I'm doing it:

import React from "react";
import HomePage from "./HomePage";
import { RouteComponentProps } from "react-router-dom";

interface RouteParams {
  slug: string
}

interface MyComponent extends RouteComponentProps<RouteParams> {
}

const MyComponent: React.FC<MyComponent> = (props) => {
  console.log("Rendering MyComponent...");

  console.log(props.match.params.slug);

  return(
    <HomePage/>
  );
};

export default MyComponent;

useParams()

And also using the useParams() hook:

interface RouteParams {
  slug: string
}

const params = useParams<RouteParams>();