How to export a react component with 'withRouter' and 'withTranslation'

user_11142587 0
Viewed 1424

I'm trying to export a class component with withRouter and withTranslation. For localization, I'm using i18next and react-i18next. This works fine in react with javascript. But I'm using react with typescript.

Component -

class TableSorter extends React.Component<any, any> {
  state = {
    data: [],
    pagination: {},
    loading: false,
  };
  componentWillReceiveProps(nextProps: any) {
    nextProps.concussionDataProp.sort(this.compare);
  }
  compare = (a: any, b: any) => {
    ///....
  };

  render() {
    const columns = [
      {
        title: "Firstname",
        dataIndex: "firstName",
        className: "col-first-name",
      },
      {
        title: "Lastname",
        dataIndex: "lastName",
        className: "col-last-name",
      },
      {
        title: "Position",
        dataIndex: "position",
        className: "col-position",
      }
    ];

    return (
      <Table
        columns={columns}
        rowKey={Math.floor(Math.random() * 10).toString()}
        dataSource={this.props.concussionDataProp}
        pagination={false}
        loading={this.state.loading}
        onRow={(record: any) => {
          return {
            onClick: () => {
              this.props.history.push({
                pathname: `/athletes/${record.id}`,
              });
            },
          };
        }}
      />
      //
    );
  }
}

export default withRouter(withTranslation()(TableSorter));

But I'm getting the following error when compiling.

Argument of type 'ComponentType<Pick<any, string | number | symbol>>' is not assignable to parameter of type 'ComponentClass<RouteComponentProps<any, StaticContext, PoorMansUnknown>, any> | FunctionComponent<RouteComponentPro ps<any, StaticContext, PoorMansUnknown>> | (FunctionComponent<...> & ComponentClass<...>) | (ComponentClass<...> & FunctionComponent<...>)'. Type 'ComponentClass<Pick<any, string | number | symbol>, any>' is not assignable to type 'ComponentClass<RouteComponentProps<any, StaticContext, PoorMansUnknown>, any> | FunctionComponent<RouteComponentProps<any, StaticCon text, PoorMansUnknown>> | (FunctionComponent<...> & ComponentClass<...>) | (ComponentClass<...> & FunctionComponent<...>)'. Type 'ComponentClass<Pick<any, string | number | symbol>, any>' is not assignable to type 'ComponentClass<RouteComponentProps<any, StaticContext, PoorMansUnknown>, any>'. Construct signature return types 'Component<Pick<any, string | number | symbol>, any, any>' and 'Component<RouteComponentProps<any, StaticContext, PoorMansUnknown>, any, any>' are incompatible. The types of 'props' are incompatible between these types. Type 'Readonly<Pick<any, string | number | symbol>> & Readonly<{ children?: ReactNode; }>' is not assignable to type 'Readonly<RouteComponentProps<any, StaticContext, PoorMansUnknown>> & Readonly<{ children?: ReactN ode; }>'. Type 'Readonly<Pick<any, string | number | symbol>> & Readonly<{ children?: ReactNode; }>' is missing the following properties from type 'Readonly<RouteComponentProps<any, StaticContext, PoorMansUnknown>>': histor y, location, match

Can anyone help me with this?

react-typescript react-i18next react-router reactjs
3 Answers

UPD

import React from "react"
import { withTranslation, WithTranslation } from "react-i18next"
import { RouteComponentProps, withRouter } from "react-router"

interface IProps {
    t: (arg: string) => string
}

class TableSorter extends React.Component<IProps & WithTranslation & RouteComponentProps, any> {
    state = {
        data: [],
        pagination: {},
        loading: false,
    }

    render() {
        return ...
    }
}

export default withTranslation()(withRouter(TableSorter))
user_126685840

I managed to solve it by wrapping the App in a Suspense tag.

import React, { Suspense } from "react";
import "./i18n";

ReactDOM.render(
  <Suspense fallback={<div>Loading</div>}>
    <App />
  </Suspense>,
  document.getElementById("root")
);
user_147654460

You can try this code

import { withTranslation, WithTranslation } from "react-i18next";

export type MyProps = {} & RouteComponentProps & WithTranslation;

class TableSorter extends React.Component<MyProps, any> {
}

export default withRouter(withTranslation()(TableSorter));
user_37521720
Related