Реагировать Использование RouteComponentProps - для типа '{}' отсутствуют следующие свойства из типа 'Readonly <RouteComponentProps <{}

Question

Я использую React с Typescript и мне нужно использовать историю, для этого мне нужен интерфейс RouteComponentProps

export default class Routes extends Component<RouteComponentProps, any> {
  render() {
   return (
    <div>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route exact path="/login" component={Login} />
        <ProtectedRoute exact path="/admin" component={Admin} />
      </Switch>
    </div>
  );
 }}

Когда я использую интерфейс props в качестве RouteComponentProps, он выдает ошибку в приведенном ниже коде.

class App extends Component {
  render() {
   return (
     <Provider>
       <React.Fragment>
         <Navbar />
         <Routes />
       </React.Fragment>
     </Provider>
 );
}
}

Ошибка при попытке использовать мой компонент маршрута.В сообщении об ошибке говорится:

В типе '{}' отсутствуют следующие свойства из типа 'Readonly>': история, местоположение, соответствие TS2739

Пожалуйста, помогите решить эту проблему

Answer 1

вы должны передать эти реквизиты вашему компоненту.

ofc вы не хотите передавать его в компонент приложения.Просто оберните его с hoc из lib реагирующего маршрутизатора)

Компонент высокого порядка "withRouter" сделает работу

import { RouteComponentProps, withRouter } from 'react-router';    
class Routes extends React.Component<RouteComponentProps, any> {

  public render() {
    return (
      <div>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/login" component={Login} />
          <ProtectedRoute exact path="/admin" component={Admin} />
        </Switch>
      </div>
    );
  }
}

export default withRouter(Routes);