У меня есть файл app.jsx
, в который импортируется createBrowserHistory
, есть компонент Header
и файл с логикой этого компонента HeaderContainer
, при клике на кнопку выдает Cannot read property 'push' of undefined
. Понимаю, что по какой-то причине history
из app.jsx
не доходит до файла HeaderContainer
, но не могу найти ошибку. Буду рад любой помощи.
Файл app.jsx
import React from "react";
import { Router, Route, Switch } from 'react-router-dom';
import { createBrowserHistory } from 'history';
import ROUTES from './routes';
import Bets from '../pages/bets';
import HeaderContainer from "../common/components/header/HeaderContainer/HeaderContainer";
import './app.scss';
export const history = createBrowserHistory();
export default function App() {
return (
<div>
<Router history={history}>
<HeaderContainer />
<Switch>
<Route exact path={ROUTES.ALL_BETS} component={Bets}></Route>
</Switch>
</Router>
</div>
);
}
Файл Header
import React from "react";
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { NavLink } from 'react-router-dom';
import NavBar from '../../navBar';
import Button from '../../buttons/mainButton';
import SecondaryButton from "../../buttons/secondaryButton";
import DropDownList from "../../dropDownList";
import Icon from "../../icon";
import logo from '../../../../assets/icons/logo.svg';
import './header.scss';
export default function Header(props) {
const {
className,
onRegistration
} = props;
return (
<div className={classnames('header', className)}>
<div className="header__logo">
<NavLink to="/">
<Icon className="header__logo-image" glyph={logo.id} viewBox={logo.viewBox} width="95" />
</NavLink>
</div>
<div>
<NavBar />
</div>
<div>
<DropDownList />
<Button caption="Sign in" />
<SecondaryButton caption="Sign up" onClick={onRegistration} />
</div>
</div>
);
}
Header.propTypes = {
className: PropTypes.string
}
Header.defaultProps = {
className: undefined
}
Файл HeaderContainer
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ROUTES from '../../../../app/routes';
import Header from '../HeaderComponent/Header';
export default class HeaderContainer extends Component {
constructor(props) {
super(props);
this.state = {};
this.redirectRegistration = this.redirectRegistration.bind(this);
}
redirectRegistration(e) {
e.preventDefault();
const { history } = this.props;
history.push('/');
}
render() {
return (
<Header
onRegistration={this.redirectRegistration}
/>
);
}
}