javascript - ¿Cómo acceder a los parámetros de la ruta desde react-router-dom usando Typescript? Ej: `/some-route/:slug`

Tomando esta ruta de ejemplo que recibe un parámetro de ruta slug:

ROUTES.ts

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

Y este componente <Switch> que renderizará <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;

Y ahora desde el componente renderizado:

MiComponente.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;

PREGUNTA

Recibo un error que dice que la propiedad slug no existe. Aunque existe al 100%, porque el valor se registra. Pero TypeScript no lo reconoce.

¿Necesito extender manualmente el RouteComponentProps para agregar esa propiedad props.match.params.slug?

Las routeProps (history, match, location) están presentes como puedes ver en la imagen de abajo.

Respuesta #1

Con la ayuda de los comentarios y estos otros contenidos:

• En ReactJS trato de obtener parámetros pero obtengo que la propiedad 'id' no existe en el tipo '{}'
• Y este artículo: Usando TypeScript para escribir react-router 5

Aquí es cómo lo estoy haciendo:

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

Y también usando el hook useParams():

interface RouteParams {
  slug: string
}

const params = useParams<RouteParams>();