ReactJs this.props.router undefined - программирование

Привет, я изучаю React js, и я столкнулся с проблемой. Когда я пытаюсь вернуться на главную страницу с помощью реактивного маршрутизатора, я получаю следующую ошибку:

Вот мой код, так как вы можете видеть, что я вызываю функцию навигации:

Если я заменил this.props.router.push('/'); на this.props.history.push('/');, он отлично работает. Что может быть проблемой? Спасибо за ваше время.

Ответы

Ответ 1

Вам не нужен метод конструктора с вызовом super(). super() вызывает конструктор родительского класса и необходимо правильно передать свойства класса родителей этому компоненту. Вам понадобится это для доступа к любым свойствам, переданным компоненту, включая router.

Верх вашего класса макета должен выглядеть следующим образом.

export default class Layout extends React.Component {
  constructor(props) {
    super(props)
  }

  navigate() {
    ...
  }

  render() {
    ...
  }
}

Вот документы о том, как работают классы в ES6!

Изменить 1: React Router

Вам также нужно использовать новый withRouter при навигации через this.props.router. Вы делаете это, передавая свой компонент в качестве аргумента и экспортируя его. Функция withRouter просто переносит ваш компонент в другой компонент, который передает опору маршрутизатора до вашего компонента. Я должен указать, что существуют другие способы выполнения программной маршрутизации (одиночные, контекстные и т.д.), Но при использовании this.props.router.push вам нужно будет использовать withRouter.

import { withRouter } from 'react-router' 
class Layout extends React.Component {
  constructor(props) {
    super(props)
  }

  navigate() {
    ...
  }

  render() {
    ...
  }
}

export default withRouter(Layout)

Использование withRouter