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

Since you are not specifying type for tokenName, typescript is trying to guess which type it should be and set type to be the same as return type for useParams(). You can try to specify type explicitly to string for tokenName, but then probably typescript will complain for not matching types of tokenName and useParams() return type. You should be able to fix it with condition which check if useParams() not returning undefined and than to assign it to tokenName.