我收到 TypeError: Cannot read property 'push' of undefined。 我應該怎么辦？

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;

錯誤

Answer 1

此錯誤意味着 - history道具未定義（未傳入道具）。

確保您正確傳遞它。 此外，您可以為 props 設置默認值以避免錯誤和損壞。

如果您使用的是react-router-dom ，則將導出語句更改為：

export default withRouter(Navbar);

withRouter 將history道具發送給子元素。