Troubleshooting type conflicts while utilizing the 'withRouter' function in Typescript

Question

Troubleshooting type conflicts while utilizing the 'withRouter' function in Typescript

Currently, I am delving deeper into React and TypeScript, seeking to expand my understanding and practical experience. While utilizing withRouter from react-router-dom, I encountered a typing error.

The issue arose within my simplistic code snippet. I attempted to research similar problems, but the responses varied. Some indicated a potential upgrade error (albeit from 2016), while others referenced using a connect() statement. However, I am not utilizing connect(), which prompted the question of whether my approach is incorrect. Suggestions also mentioned mapping Props to State, a concept I have not encountered before. I am hopeful that someone can offer guidance on what I might be overlooking and what areas I should further explore.

The code snippet is as follows:

import React from "react";
import { withRouter } from "react-router-dom";

interface ISection {
  id: number;
  title: string;
  imageUrl: string;
  size: string;
}

class MenuItem extends React.Component<ISection> {
  render() {
    return (
      <div className={`${this.props.size} menu-item`}>
        <div
          className="background-image"
          style={{ backgroundImage: `url(${this.props.imageUrl})` }}
        />
        <div className="content">
          <h1 className="title">{this.props.title}</h1>
          <span className="subtitle">some subtitle</span>
        </div>
      </div>
    );
  }
}

export default withRouter(MenuItem);

Expectations entailed seamless functionality; I initially attempted a functional component due to the absence of state. However, all solutions I encountered pointed towards using a class component. Consequently, I transitioned to a class component, yet I encounter the following error with the MenuItem in the final line:

Argument of type 'typeof MenuItem' is not assignable to parameter of type 'ComponentClass<RouteComponentProps<any, StaticContext, any>, any> | FunctionComponent<RouteComponentProps<any, StaticContext, any>> | (FunctionComponent<RouteComponentProps<any, StaticContext, any>> & ComponentClass<...>) | (ComponentClass<...> & FunctionComponent<...>)'.
  Type 'typeof MenuItem' is not assignable to type 'ComponentClass<RouteComponentProps<any, StaticContext, any>, any>'.
    Types of parameters 'props' and 'props' are incompatible.
      Type 'RouteComponentProps<any, StaticContext, any>' is missing the following properties from type 'Readonly<ISection>': id, title, imageUrl, sizets(2345)

My queries are:

Why does it refer to "type 'typeof MenuItem'" instead of simply the type of 'MenuItem'?
Is withRouter exclusive to class components or can it also be applied to functional components?
Do I need to use connect() or map Props to State? If so, what is the rationale behind this?
Lastly, how can this issue be resolved?

typescript react-router react-router-dom

Answer 1

Answer №1

According to the documentation, the `withRouter` function will update the `match`, `location`, and `history` props of the wrapped component whenever it renders.

Therefore, the `MenuItem` component needs to have props to receive these router props. However, at the moment, the `MenuItem` component only has props of type `ISection`, which does not include router props.

The simplest way to add router props is to combine `ISection` with `RouteComponentProps`.

import { withRouter, RouteComponentProps } from "react-router-dom";

// ...
class MenuItem extends React.Component<ISection & RouteComponentProps> {

The full code example is as follows:

import * as React from 'react';
import { withRouter, RouteComponentProps } from "react-router-dom";

interface ISection {
    id: number;
    title: string;
    imageUrl: string;
    size: string;
}

class MenuItem extends React.Component<ISection & RouteComponentProps> {
    render() {
        return (
            <div className={`${this.props.size} menu-item`}>
                <div
                    className="background-image"
                    style={{ backgroundImage: `url(${this.props.imageUrl})` }}
                />
                <div className="content">
                    <h1 className="title">{this.props.title}</h1>
                    <span className="subtitle">some subtitle</span>
                </div>
            </div>
        );
    }
}

export default withRouter(MenuItem);

Answers to the questions raised:

Why does it say "type 'typeof MenuItem'"? Shouldn't it just say the type of 'MenuItem' instead of the function to obtain the type?

The error arises from types incompatibility. `MenuItem` is a class, not a type. To get the type of `MenuItem`, you should use `typeof MenuItem`. Therefore, `typeof MenuItem` is the correct type, as indicated by the compiler.

Is it necessary for withRouter to work with class components, or does it also work on functional components?

`withRouter` can work with both class components and functional components. A functional component implementation is provided below:

const Cmp1: React.FunctionComponent<ISection & RouteComponentProps> = (props) => {
    return (
        <div className={`${props.size} menu-item`}>
            <div
                className="background-image"
                style={{ backgroundImage: `url(${props.imageUrl})` }}
            />
            <div className="content">
                <h1 className="title">{props.title}</h1>
                <span className="subtitle">some subtitle</span>
            </div>
        </div>
    );
}

const WrappedCmp = withRouter(Cmp1);

Do I need to `connect()` something, or map Props onto State? If so, why?

No, it's not a strict requirement. `connect` is part of Redux, so if you are using Redux, you can connect. Refer to the documentation for how to use `withRouter` with `connect`, although it's not mandatory.
Lastly, how can I fix this?

The solution has already been provided above :-)

Answer 2

According to the documentation, the `withRouter` function will update the `match`, `location`, and `history` props of the wrapped component whenever it renders.

Therefore, the `MenuItem` component needs to have props to receive these router props. However, at the moment, the `MenuItem` component only has props of type `ISection`, which does not include router props.

The simplest way to add router props is to combine `ISection` with `RouteComponentProps`.

import { withRouter, RouteComponentProps } from "react-router-dom";

// ...
class MenuItem extends React.Component<ISection & RouteComponentProps> {

The full code example is as follows:

import * as React from 'react';
import { withRouter, RouteComponentProps } from "react-router-dom";

interface ISection {
    id: number;
    title: string;
    imageUrl: string;
    size: string;
}

class MenuItem extends React.Component<ISection & RouteComponentProps> {
    render() {
        return (
            <div className={`${this.props.size} menu-item`}>
                <div
                    className="background-image"
                    style={{ backgroundImage: `url(${this.props.imageUrl})` }}
                />
                <div className="content">
                    <h1 className="title">{this.props.title}</h1>
                    <span className="subtitle">some subtitle</span>
                </div>
            </div>
        );
    }
}

export default withRouter(MenuItem);

Answers to the questions raised:

Why does it say "type 'typeof MenuItem'"? Shouldn't it just say the type of 'MenuItem' instead of the function to obtain the type?

The error arises from types incompatibility. `MenuItem` is a class, not a type. To get the type of `MenuItem`, you should use `typeof MenuItem`. Therefore, `typeof MenuItem` is the correct type, as indicated by the compiler.

Is it necessary for withRouter to work with class components, or does it also work on functional components?

`withRouter` can work with both class components and functional components. A functional component implementation is provided below:

const Cmp1: React.FunctionComponent<ISection & RouteComponentProps> = (props) => {
    return (
        <div className={`${props.size} menu-item`}>
            <div
                className="background-image"
                style={{ backgroundImage: `url(${props.imageUrl})` }}
            />
            <div className="content">
                <h1 className="title">{props.title}</h1>
                <span className="subtitle">some subtitle</span>
            </div>
        </div>
    );
}

const WrappedCmp = withRouter(Cmp1);

Do I need to `connect()` something, or map Props onto State? If so, why?

No, it's not a strict requirement. `connect` is part of Redux, so if you are using Redux, you can connect. Refer to the documentation for how to use `withRouter` with `connect`, although it's not mandatory.
Lastly, how can I fix this?

The solution has already been provided above :-)

Answer 3

Answer №2

If you are looking for guidance on incorporating your props interface with WithRouterProps in Next.js, you can do so by following these steps:

import { WithRouterProps } from "next/dist/client/with-router";

class MenuItem extends React.Component<IProps & WithRouterProps>

Answer 4

If you are looking for guidance on incorporating your props interface with WithRouterProps in Next.js, you can do so by following these steps:

import { WithRouterProps } from "next/dist/client/with-router";

class MenuItem extends React.Component<IProps & WithRouterProps>

Troubleshooting type conflicts while utilizing the 'withRouter' function in Typescript

Answer №1

Answer №2

Similar questions

The toggle-input component I implemented in React is not providing the desired level of accessibility

Dynamic Text Labels in Treemap Visualizations with Echarts

Is it possible to execute user-defined functions dynamically in a Node.js application without having to restart the server

Issue with TypeScript: Difficulty accessing keys in a recursive manner

What is the best way to initiate multiple processes in Node.js and ensure they finish before proceeding?

Positional vs Named Parameters in TypeScript Constructor

What is the best way to update an array in TypeScript when the elements are of different types and the secondary array has a different type as

Issue with accessing storage in Ionic Storage (Angular)

Retrieve a prepared response from a TypeORM query

I'm having trouble figuring out why this React Router setup is not functioning properly. Can anyone provide any insights

When using TypeORM, make sure to include the "WHERE IN (...)" clause in the query condition only if there is a value associated with it

Improprove the performance of an array of objects using JavaScript

Mastering the art of throwing and managing custom errors from the server to the client side within Next.js

The resolution of Angular 8 resolver remains unresolved

Error encountered: YouCompleteMe is unable to locate the necessary executable 'npm' for the installation of TSServer

Obtain the filter criteria within the user interface of a Kendo grid

How can we pass an optional boolean prop in Vue 3?

Should I use Object.assign or define class properties?

Use JavaScript's Array.filter method to efficiently filter out duplicates without causing any UI slowdown

Bringing in the Ionic ToastController to a TypeScript class