React-router + typescript type error

Question

While creating my react app with typescript I ran into a small issue that I have not been able to solve just yet.

My code:

App.tsx

import  *          


        

Answer 1

Edit and TL;DR: Just upgrade your type declarations with

npm install --save-dev @types/react-router

Explanation

This is a bug in the declaration files. The problem is was that the type of children was originally expected to be

((props: RouteComponentProps<any>) => React.ReactNode | React.ReactNode)

which really is a function that returns a union of React.ReactNode | React.ReactNode which collapses down to a simple React.ReactNode.

What it really should have been was

((props: RouteComponentProps<any>) => React.ReactNode) | React.ReactNode

I've opened up a pull request for you here.

I should mention that you may not want to take a dependency on this behavior. Almost all examples I can find online use an explicit attribute for children while passing in a function with react-router. Even the documentation itself says that it only takes a function (rather than an element or anything else).