Привет, я изучаю React js, и я столкнулся с проблемой. Когда я пытаюсь вернуться на главную страницу с помощью реактивного маршрутизатора, я получаю следующую ошибку:
Uncaught TypeError: невозможно прочитать свойство "push" из undefined
Вот мой код, так как вы можете видеть, что я вызываю функцию навигации:
My client.js с маршрутизатором:
Если я заменил this.props.router.push('/'); на this.props.history.push('/');, он отлично работает.
Что может быть проблемой? Спасибо за ваше время.
Вам не нужен метод конструктора с вызовом 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)