Categories
TypeScript Answers

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

Spread the love

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.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.