我正在使用react-boostrap导航栏,并且在单击汉堡包图标时响应时,出现此错误
我对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;