Не получаю реквизит в реактив

Question

Я не получаю реквизиты в моем компоненте Nav.Странно то, что this.props.history.push работает в других моих компонентах.

Эта же функция работает и в других моих компонентах, но когда я пытаюсь вызвать функцию push, я получаю'err in logout TypeError: Невозможно прочитать свойство' push 'of undefined'.Объект 'this.props' регистрируется как '{}'.

Любая помощь приветствуется, спасибо.

import React from 'react'

import logo from 'logo.png'

import css from './Nav.module.scss'

import { Link } from 'react-router-dom'

import Cookies from 'js-cookie'
import axios from 'axios'

class Nav extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      loggedIn: false
    }
    console.log(this.props)
  }

  _handleLogout = () => {
    // const self = this
    console.log(this.props)
    axios.get('http://localhost:8080/logout', {
      withCredentials: true
    })
    .then(res => {
      console.log(res)
      console.log('logout')
      if (Cookies.get('sid') === undefined) {
        this.props.history.push('/')
      }
      console.log(this.props)
    })
    .catch(err => {
      console.log('err in logout', err)
    })
  }

  render() {
    return (
      <div className={css.nav}>
        <div className={css.leftPart}>
          <Link to="/">
            <div className={css.brandicon}>
              <img src={logo} alt="Logo" />
            </div>
            <div className={css.brandname}>
              somebrand
            </div>
          </Link>
        </div>
        <div className={css.rightPart}>
          {
            Cookies.get('sid') === undefined ?
              <Link to="/login">
                <div className={css.loginButton}>
                  Login
                </div>
              </Link>
              :
              <div className={css.logoutButton} onClick={this._handleLogout}>
                Logout
              </div>
          }
        </div>
      </div>
    )
  }
}

export default Nav

Мой компонент Nav упоминается только один раз в моем компоненте Layout:

import React from 'react'

import Nav from 'components/Nav/Nav'

import css from './BasicLayout.module.scss'

class Basic extends React.Component {
  render() {
    return (
      <div className={css.page}>
        <Nav />
        <div className={css.content}>
          {this.props.children}
        </div>
      </div>
    )
  }
}

export default Basic

Answer 1

history и location являются специальными props, введенными HOC React Router withRouter

import { withRouter } from 'react-router-dom'
class Nav extends React.Component{
    render(){
        const { history, location } = this.props
        return <div>{`I'm at ${location.pathname}`}</div>
    }
}
export default withRouter(Nav)

Это также работает для functional components

export const Component = withRouter(({ history, location })) =>(
    <div>{`I'm at ${location.pathname}`}</div>
)