What is wrong with my Router element in React JS?

My navbar icon doesn't show up and the console announce the mistake at App.js as:"Line 9: 'Router' is not defined react/jsx-no-undefct/jsx-no-undef". I don't know what is wrong with my codes. Anybody can help me? Thank you so much!

This is my App.js:

import React from "react";
import Navbar from "./components/Navbar";
import "./App.css";
import { BrowserRouter as Browser, Switch, Route } from "react-router-dom";

function App() {
  return (
    <>
      <Router>
        <Navbar />
        <Switch>
          <Route path="/" />
        </Switch>{" "}
      </Router>{" "}
    </>
  );
}

export default App;

This is my Navbar.js:

import React from "react";
import * as FaIcons from "react-icons/fa";
import { Link } from "react-router-dom";

function Navbar() {
  return (
    <div>
      <div className="navbar">
        <Link to="#" className="menu-bars">
          <FaIcons.FaBars />
        </Link>{" "}
      </div>{" "}
    </div>
  );
}

export default Navbar;

You seem to be using something that's not defined (Router) in your App.js, rename Browser to Router in the react-router-dom import to make it work

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

function App() {
return (
    <>
      <Router>
        <Navbar />
        <Switch>
          <Route path="/" />
        </Switch>
      </Router>
    </>
  );
}