How to access route params from react-router-dom using Typescript? Ex: `/some-route/:slug`

user_10128619 0
Viewed 13093

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?

enter image description here

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

enter image description here

react-router-dom react-router typescript reactjs javascript
1 Answers

With the help of the comments and these other contents:

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>();
user_101286190
Related