I am getting TypeError: Cannot read property 'push' of undefined. what should I do?

Question

import "./Navbar.css";
import * as ReactBootstrap from "react-bootstrap";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import {
  FaFacebookF,
  FaTwitter,
  FaPinterest,
  FaInstagram,
  FaCcPaypal,
  FaCcMastercard,
  FaCcVisa,
  FaCreditCard,
  FaStar,
  FaCircle,
  FaRegHeart,
} from "react-icons/fa";
import {
  BiSearchAlt,
  BiUserCircle,
  BiHeart,
  BiShoppingBag,
  BiEnvelope,
  BiLoader,
} from "react-icons/bi";
import React from "react";
import ReactDOM from "react-dom";
import { withRouter } from "react-router-dom";
import SingleProduct from "./SingleProduct";
import {
  BrowserRouter as Router,
  Route,
  Switch,
  Redirect,
} from "react-router-dom";
import history from "./History";
const Navbar = (props) => {
  let callsingleproduct = () => {
    console.log("SINGLE PRODUCT :|: ", props);
    props.history.push("/SingleProduct");
  };
  return (
    <div className='App'>
      {" "}
      <Container fluid className='navbar1 nav1'>
        {" "}
        <ReactBootstrap.Navbar
          collapseOnSelect
          expand='lg'
          className=' justify-content-center '>
          {" "}
          <ReactBootstrap.Navbar className='nav1 pt-2 nav'>
            <BiUserCircle className='mr-2 mt-1 login ' />
            LOGIN
          </ReactBootstrap.Navbar>{" "}
          <ReactBootstrap.Navbar.Toggle aria-controls='responsive-navbar-nav ' />{" "}
          <ReactBootstrap.Navbar.Collapse id='responsive-navbar-nav'>
            {" "}
            <ReactBootstrap.Nav className='mx-auto pl-5'>
              {" "}
              <ReactBootstrap.Nav.Link className='mx-3 pt-4 nav'>
                HOME
              </ReactBootstrap.Nav.Link>{" "}
              <ReactBootstrap.Nav.Link className='mx-3 pt-4 nav '>
                SHOP
              </ReactBootstrap.Nav.Link>{" "}
              <ReactBootstrap.Nav.Link className='mx-3 pt-4 nav'>
                PAGES
              </ReactBootstrap.Nav.Link>{" "}
              <ReactBootstrap.Nav.Link className='mx-4'>
                <img src='images/capture.PNG' width='80%' alt='pic' />
              </ReactBootstrap.Nav.Link>{" "}
              <ReactBootstrap.Nav.Link className='mx-3 pt-4 nav'>
                BLOG
              </ReactBootstrap.Nav.Link>{" "}
              <ReactBootstrap.Nav.Link className='mx-3 pt-4 nav'>
                LOOKBOOK
              </ReactBootstrap.Nav.Link>{" "}
              <ReactBootstrap.Nav.Link className='mx-3 pt-4 nav'>
                CONTACT
              </ReactBootstrap.Nav.Link>{" "}
            </ReactBootstrap.Nav>{" "}
            <ReactBootstrap.Nav>
              {" "}
              <ReactBootstrap.Nav.Link>
                {" "}
                <Row className='icon'>
                  {" "}
                  <ReactBootstrap.Nav.Link className='mx-1'>
                    <BiUserCircle className=' login' />
                  </ReactBootstrap.Nav.Link>{" "}
                  <ReactBootstrap.Nav.Link className='mx-1'>
                    <BiSearchAlt className=' login' />
                  </ReactBootstrap.Nav.Link>{" "}
                  <ReactBootstrap.Nav.Link className='mx-1'>
                    <BiHeart className=' login' />
                  </ReactBootstrap.Nav.Link>{" "}
                  <ReactBootstrap.Nav.Link className='mx-1'>
                    <BiShoppingBag
                      className='login'
                      onClick={() => {
                        callsingleproduct();
                      }}
                    />{" "}
                  </ReactBootstrap.Nav.Link>{" "}
                </Row>{" "}
              </ReactBootstrap.Nav.Link>{" "}
            </ReactBootstrap.Nav>{" "}
          </ReactBootstrap.Navbar.Collapse>{" "}
        </ReactBootstrap.Navbar>{" "}
      </Container>{" "}
    </div>
  );
};

export default Navbar;

Error

Answer 1

This error means that - the history prop is undefined (not passed in props).

Make sure you are passing it correctly. Also, you can set default values to props to avoid error and breakage.

If you're using react-router-dom , then change the export statement to:

export default withRouter(Navbar);

withRouter sends the history prop to the child element.