required url param on React router v5 with typescript, can be undefined

Question

I am using react-router v5.1 with TypeScript and have this route configurations:

<Router basename="/" hashType="slash">     <Switch>         <Route path="/token/:tokenName">             <TokenPage />         </Route>     </Switch> </Router>  

and I try to access the url param (tokenName) in the component, with useParams hook like so:

const TokenPage: FC<TokenPageProps> = props => {     const { tokenName } = useParams()     ... }  

However, typescript thinks that tokenName param can be undefined:

which does not make sense since react router won't match this route if the param is missing in the URL.

How can I fix the typing in that situation?

Answer 1

In this situation, your TokenPage code is unaware it is being wrapped by a Route. You are right that if the URL does not contain the proper parameters, your component wouldn't be rendered. But Typescript isn't aware of this.

The default typing you got there is proper and you should null check the value before using it.

If ever you would want to override the typing, useParams is generic and accepts a type specifying the return value type.

interface ParamTypes {   tokenName: string } const { tokenName } = useParams<ParamTypes>() 

---

EDIT 09/29/20

The latest typing for useParams changed.

export function useParams<Params extends { [K in keyof Params]?: string } = {}>(): Params; 

As you can see, the new default is {} which will not imply any of the keys contained, but the generic constraints does assume that the values are of type string.

So the following line would now yield a Property 'tokenName' does not exist on type '{}'. TypeScript error.

const { tokenName } = useParams() 

To fix this, either you type the useParams with known parameters like in the first example, or you type it like this:

const { tokenName } = useParams<Record<string, string | undefined>>()