在使用React-Routerdom和React Bootstrap后，如何使Navbar链接在React Js中工作？

Question

这是我第一次在React中创建Navbar。

尽管Navbar在输出中显示。...链接并未根据需要将我带到页面。

我正在使用以及最新的React-Bootstrap。

有人可以看看吗？

这是我的代码：

    import React, { Component } from "react";
import { Navbar, Container, Nav } from "react-bootstrap";
import {
BrowserRouter as Router,

  Link,
} from "react-router-dom";

import icon from "../Icons/Icon.png";
import filtericon from "../Icons/Filtericon.png";
import logo from "../logo/Logo.png";
import button from "../images/login-btn.png";
import SearchBar from "./Search";
import "./navbar.css";

export default class Navbarbefore extends Component {
  render() {
    return (
      <Router>
        <div className="nav-container">
          <Navbar
            collapseOnSelect
            expand="lg"
            bg=".bg-transparent"
            variant="dark"
            className="gap-3 px-3"
          >
            <Container>
              <Navbar.Brand href="/">
                <img className="main-logo" src={logo} alt="logo" />
              </Navbar.Brand>
              <Navbar.Toggle aria-controls="navbarScroll" />
              <Navbar.Collapse id="navbarScroll">
                <Nav className="me-auto flex-grow-1">
                  <div className="ml-70">
                    <SearchBar />
                  </div>
                  <Nav.Link as={Link} href="/home">
                    {" "}
                    <img
                      className="filter"
                      src={filtericon}
                      alt="notification-bell"
                    />
                  </Nav.Link>
                  <Nav.Link as={Link} activeKey="/reviews">
                    {" "}
                    <div className="mr-60 ml-74 review"> Review </div>
                  </Nav.Link>
                  <Nav.Link as={Link} activeKey="/community">
                    {" "}
                    <div className="mr-74 community">Community</div>
                  </Nav.Link>
                  <Nav.Link activeKey="#">
                    {" "}
                    <img
                      className="ml-74 notification"
                      src={icon}
                      alt="notification-bell"
                    />
                  </Nav.Link>
                </Nav>
                <Nav>
                  <Nav.Link as={Link} activeKey="/login">
                    <img className="ml-74" src={button} alt="log in button" />
                  </Nav.Link>
                </Nav>
              </Navbar.Collapse>
            </Container>
          </Navbar>
        </div>
      </Router>
    );
  }
}

这是我的App JS的代码，

import { BrowserRouter as Route, Switch,} from "react-router-dom";
import Home from "./Pages/homepage/Home";
import Reviews from "./Pages/Reviews";
import Community from "./Pages/Community";
import Login from "./Pages/login/Login";
import Navbarbefore from "./Navbar/Navbarbefore";
import Footer from "./footer/footer-main";

import './App.css';

function App() {
  return (
    <div className="App">
      <Navbarbefore />
      <Home />
      <div>
        <Switch>
          <Route path="/home">
            <Home />
          </Route>
          <Route path="/reviews">
            <Reviews />
          </Route>
          <Route path="/community">
            <Community />
          </Route>
          <Route path="/login">
            <Login />
          </Route>
        </Switch>
      </div>
      <Footer />
    </div>
  );
}
export default App;

希望您可以帮助我找到解决方案:)

谢谢:)

Answer 1

React-Router-dom 链接组件需要to prop prop for他们所链接到的路径。

例子：

export default class Navbarbefore extends Component {
  render() {
    return (
      <Router>
        <div className="nav-container">
          <Navbar
            collapseOnSelect
            expand="lg"
            bg=".bg-transparent"
            variant="dark"
            className="gap-3 px-3"
          >
            <Container>
              <Navbar.Brand href="/">
                <img className="main-logo" src={logo} alt="logo" />
              </Navbar.Brand>
              <Navbar.Toggle aria-controls="navbarScroll" />
              <Navbar.Collapse id="navbarScroll">
                <Nav className="me-auto flex-grow-1">
                  <div className="ml-70">
                    <SearchBar />
                  </div>
                  <Nav.Link
                    as={Link}
                    to="/home" // <-- to prop
                  >
                    <img
                      className="filter"
                      src={filtericon}
                      alt="notification-bell"
                    />
                  </Nav.Link>
                  <Nav.Link
                    as={Link}
                    to="/reviews" // <-- to prop
                    activeKey="/reviews"
                  >
                    <div className="mr-60 ml-74 review"> Review </div>
                  </Nav.Link>
                  <Nav.Link
                    as={Link}
                    to="/community"
                    activeKey="/community" // <-- to prop
                  >
                    <div className="mr-74 community">Community</div>
                  </Nav.Link>
                  <Nav.Link activeKey="#">
                    <img
                      className="ml-74 notification"
                      src={icon}
                      alt="notification-bell"
                    />
                  </Nav.Link>
                </Nav>
                <Nav>
                  <Nav.Link
                    as={Link}
                    to="/login" // <-- to prop
                    activeKey="/login"
                  >
                    <img className="ml-74" src={button} alt="log in button" />
                  </Nav.Link>
                </Nav>
              </Navbar.Collapse>
            </Container>
          </Navbar>
        </div>
      </Router>
    );
  }
}