Categories
TypeScript Answers

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

Spread the love

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.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *