未捕获的TypeError:Object(...)不是React Bootstrap Navbar中的函数

时间:2020-11-02 07:53:44

标签: reactjs react-bootstrap

我正在使用react-boostrap导航栏,并且在单击汉堡包图标时响应时,出现此错误

enter image description here

我对React还是很陌生,所以我遵循了指南并在全屏下正常工作。仅在响应中,我会收到错误。

import React from "react";
import "./Navbar.css";
import {Nav, Navbar} from "react-bootstrap";
import logo from "../../assets/imgs/logo-icons/Logo-White.svg";
import tree from "../../assets/imgs/logo-icons/Tree-White.svg";
import { Link } from "react-router-dom";

function NavBar() {
  return (
    <Navbar
      expand="lg"
      className="navbar"
      collapseOnSelect
    >
      <Navbar.Toggle aria-controls="basic-navbar-nav" />
      <Navbar.Collapse id="basic-navbar-nav">
        <Nav className="mr-auto">
          <Nav.Link as={Link} className="navbar-link" to="/shop">
            Shop
          </Nav.Link>
          <Nav.Link as={Link} className="navbar-link" to="/meet">
            Meet us
          </Nav.Link>
          <Nav.Link as={Link} className="navbar-link" to="/blog">
            Blog
          </Nav.Link>
        </Nav>
        <Navbar.Brand to="/" as={Link}>
          <img src={logo} alt="Logo" className="navbar-logo" />
        </Navbar.Brand>
        <Nav className="ml-auto">
          <Nav.Link
            as={Link}
            className="navbar-link"
            to="/contact"
          >
            Contact us
          </Nav.Link>
          <Nav.Link to="/cart" as={Link}>
            <img src={tree} alt="Tree" className="navbar-tree" />
          </Nav.Link>
        </Nav>
      </Navbar.Collapse>
    </Navbar>
  );
}

export default NavBar;

和CSS:

.navbar {
  font-family: Light;
  background-color: transparent !important;
  position: absolute !important;
  top: 0px;
  z-index: 10;
  width: 100%;
}

我将Navbar添加到App.js的路由器中,并仅路由了2条路径以进行测试,但我认为这不是问题

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import "./App.css";
import NavBar from "./components/Navbar/Navbar";
import Home from "./pages/Home";
import About from "./pages/Meet";

function App() {
  return (
    <Router>
      <NavBar />
      <Route exact path="/" component={Home} />
      <Route path="/meet" component={About} />
    </Router>
  );
}

export default App;

0 个答案:

没有答案