Блог

Я пытаюсь реализовать восстановление прокрутки в маршрутизаторе React, используя Typescript с кодом ниже.

 import { Component } from 'react';

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

export interface IProps {
  prevProps?: any;
  location: object;
  pathname?: any;
}

class ScrollToTop extends Component<IProps, object> {

  componentDidUpdate(prevProps?: any) {
    if (this.props.location.pathname !== prevProps.location.pathname) {
      window.scrollTo(0, 0);
    }
  }

  render() {

    return this.props.children;

  }

}

export default withRouter(ScrollToTop);
  

Тем не менее, я продолжаю получать следующую ошибку TS при добавлении типов для местоположения и пути.

(14,29): Property 'pathname' does not exist on type 'object'.

Почему мой код неверен?

Как упоминалось в другом ответе, withRouter должно быть импортировано из react-router .

Но чтобы ответить на ваш вопрос об ошибке Typescript, это связано location с тем, что он был определен как object для typescript без указания на него свойств. Вот почему при попытке доступа pathname к нему возникает ошибка.

К счастью, вам не нужно записывать все свойства в location prop. Вместо этого вы можете установить типы react-router с:

 npm install --save @types/react-router @types/react-router-dom
  

При создании компонента, который наследует эти реквизиты (совпадение, местоположение, история), просто расширьте RouteComponentProps :

 import { RouteComponentProps } from "react-router";

interface IProps extends RouteComponentProps {
  // other props
}