Блог

Я хочу перейти к началу страницы после изменения маршрута. Я буду использовать react-router history.listen хук. Однако в нем говорится Property 'unlisten' does not exist on type 'ScrollToTop'.

Это не кажется сложной проблемой, но я не мог понять, что не так. Пожалуйста, не предлагайте другой метод, вместо этого объясните решение этой ошибки. Я просто хочу устранить эту ошибку.

Это фрагмент кода, который я использую

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

type TScrollToTopProps = RouteComponentProps;

class ScrollToTop extends Component<TScrollToTopProps> {

  componentDidMount() {
    this.unlisten = this.props.history.listen((location) => {
      window.scrollTo(0, 0);
    });
  }

  componentWillUnmount() {
    this.unlisten();
  }

  render() {
    return this.props.children;
  }
}

export default withRouter(ScrollToTop);
  

Вы должны просто создать такое состояние unlisten

 import { RouteComponentProps, withRouter } from "react-router-dom";
import { UnregisterCallback } from 'history';

interface IScrollToTopState {
  unlisten: UnregisterCallback;
}
class ScrollToTop extends Component<RouteComponentProps, IScrollToTopState> {
  state: IScrollToTopState = {
    unlisten: null
  };

  componentDidMount() {
    this.setState({
      unlisten: this.props.history.listen((location) => {
         window.scrollTo(0, 0);
      })
    });
  }

  componentWillUnmount() {
    this.state.unlisten();
  }

  render() {
    return this.props.children;
  }
}

export default withRouter(ScrollToTop);