我收到类型错误：无法读取未定义的属性“推送”我应该怎么办？

问题描述

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

解决方法

此错误意味着 - history 道具未定义（未在道具中传递）。

确保您正确传递它。此外，您可以为 props 设置默认值以避免错误和损坏。

如果您使用的是 react-router-dom，请将导出语句更改为：

export default withRouter(Navbar);

withRouter 将 history 属性发送到子元素。