How do I get my navbar links to work in React JS after using react-routerdom and react bootstrap?

This is my first time creating a Navbar in React.

Although the Navbar shows in the output.... The links do not take me to the pages as required.

I am using react-router-dom@5.3.0. and the latest react-bootstrap.

Can someone please have a look?

This is my code:

    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>
    );
  }
}

This is my code for the my 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;

I hope you can help me to find a solution :)

thanks :)