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:

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

---

EDIT 09/29/20

The latest typing for useParams changed.

export function useParams(): 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>()