Программная навигация: React Router V4 + Typescript дает ошибку

Question

Ошибка при программной навигации с использованием активного маршрутизатора v4 и Typescript:

Свойство 'history' не существует для типа 'Readonly & Readonly <{children ?: ReactNode; }>

Я хочу перенаправить на определенный путь в случае успешного или неудачного вызова API. Но Невозможно сделать это.

Помощь будет оценена

Код маршрутизатора

import { BrowserRouter as Router , Switch , Route} from 'react-router-dom';
import * as React from 'react';

class App extends React.Component<{}, {}>  {
 render()
 {
    <Router>
      <Switch>
          <Route exact={true} path='/' component={Login}/>
          <Route path='/home' component={Home}/>
          <Route path='/test' component={Test}/>
      </Switch>
    </Router>
  }
}
export default App;

Компонент

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

class Test extends React.Component<IProps, IState> {

  handleSubmit = async() => {
            //code for API calls
            this.props.history.push("/home") // error at this line
   }

  render() {
     // Form with validations and a submit handler
  }
}
export default  withRouter(Test);

Answer 1

Вам необходимо импортировать import { RouteComponentProps } from "react-router-dom"; Интерфейс RouteComponentProps содержит реквизиты, которые вы ищете.

export interface RouteComponentProps<Params extends { [K in keyof Params]?: string } = {}, C extends StaticContext = StaticContext, S = H.LocationState> {
  history: H.History;
  location: H.Location<S>;
  match: match<Params>;
  staticContext?: C;
}

Ваш компонент будет выглядеть примерно так:

import { withRouter } from "react-router-dom";
import * as React from "react";
import { RouteComponentProps } from "react-router-dom";
interface IProps {}

type HomeProps = IProps & RouteComponentProps;

interface IState {}

class Home extends React.Component<HomeProps, IState> {
  constructor(props: HomeProps) {
    super(props);
  }
  private handleSubmit = async () => {
    //code for API calls
    this.props.history.push("/home");
  };

  public render(): any {
    return <div>Hello</div>;
  }
}
export const HomeComponent = withRouter(Home);