reactjs - React Router DOM History-objekt orsakar Typescript-fel

Jag har ett problem där jag har en stateless-komponent som får History-objektet från react-router-dom och skickar vidare det objektet till en stateful-komponent genom props. Typescript verkar inte tro att jag kan skicka history-objektet vidare som en prop.

Här är mina komponenter

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

const SignInPage = ({ history }: { history: History }) =>
  <div>
    <h1>SignIn</h1>
    <SignInForm history={history} />
  </div>

class SignInForm extends React.Component<RouteComponentProps<{}>, {}> {

  constructor(props: RouteComponentProps<{}>) {
    super(props);
  }

  public handleClick = () => {
    const { history } = this.props;
    history.push('/home')
  };

  public render() {

    return (
      <button onClick={this.handleClick}>Sign In!</button>
    );
  }
}

export default withRouter(SignInPage);

export { SignInForm };

Och felet jag får är detta.

Type '{ history: History; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<SignInForm> & Readonly<{ children?: ReactNode; }> ...'.
  Type '{ history: History; }' is not assignable to type 'Readonly<RouteComponentProps<{}, StaticContext>>'.
    Property 'location' is missing in type '{ history: History; }'.

Svar #1

Jag har aldrig använt React Router, men om jag förstår typerna korrekt, genom att deklarera SignInForm extends React.Component<RouteComponentProps<{}>, {}>, säger du att SignInForm kräver alla props som en ruttkomponent normalt får när den anropas av React Router. Eftersom du anropar den själv och bara skickar historiken, borde du bara deklarera den som SignInForm extends React.Component<{history: History}, {}>.

Relaterade artiklar