React TypeScript: Correct type for dynamic path

Question

The router looks somthing like this

import { BrowserRouter, Route, Switch } from 'react-router-dom';

...
<Route exact path='/confirm-email/:confirmationCode' component={ConfirmEmail} />
                                        ^
//                                      This is the value that gets passed to the props

And the component that gets loaded is

import { RouteComponentProps } from 'react-router-dom';

interface PropsInterface extends RouteComponentProps<{}> {
  confirmationCode: string;
}
const ConfirmEmail: React.FC<PropsInterface>  = (props: PropsInterface) => {
  const confirmationCode = props.match.params.confirmationCode;
                                                   ^
//                                                 Error Here!

The error I get is Property 'confirmationCode' does not exist on type '{}'.ts(2339)

This is not a duplicate of react-router-dom with TypeScript as it does not address the dynamic path being passed as a prop

Does this answer your question? [react-router-dom with TypeScript](https://stackoverflow.com/questions/44118060/react-router-dom-with-typescript) — Amir-Mousavi, Dec 03 '19 at 15:21
It shows how to attach an interface but doesn't show the correct type for the props when passing a dynamic path — Bill, Dec 03 '19 at 15:23
`the correct type for the props when passing a dynamic path ` This phrase is not valid? What do you mean by that? create another interface that extends `RouteComponentProps` and define other props in there? Or pass specific Route props as `` — Amir-Mousavi, Dec 03 '19 at 15:28

score 0 · Accepted Answer · answered Dec 03 '19 at 16:33

:confirmationCode is part of the Route props, props.match.params.confirmationCode

So a prop that belongs to RouteComponentProps

Therefore you need to pass it to RouteComponentProps like:

import { RouteComponentProps } from 'react-router-dom';
interface PropsInterface extends RouteComponentProps<{confirmationCode: string}> {
 others:any; // Other props that belong to component it self not Router
}

or more clear if you want to destruct more Route params

   interface IParams { confirmationCode:string; ....  }
   interface IProps extends RouteComponentProps<IParams>{....}

SO you see this is exactly the same as what is covered in the duplicated question? the differences are namings.

React TypeScript: Correct type for dynamic path

1 Answers1