Sometimes, we want to fix TypeScript errors on withRouter after updating version with React Router.

In this article, we’ll look at how to fix TypeScript errors on withRouter after updating version with React Router.

How to fix TypeScript errors on withRouter after updating version with React Router?

To fix TypeScript errors on withRouter after updating version with React Router, we can assign our own type for the route props.

For instance, we write

import { RouteComponentProps } from "react-router";

interface Props extends RouteComponentProps {
  thing: Thing | false;
  onAction?: () => void;
}

export default withRouter(({ thing, onAction, history }: Props) => {
  //...
});

to assign the { thing, onAction, history } parameter to the Props type which extends the RouteComponentProps interface provided by react-router.

This will let us add our own properties and types without the TypeScript compiler raising errors.

Conclusion

To fix TypeScript errors on withRouter after updating version with React Router, we can assign our own type for the route props.