React JS different navbars for different pages

I have two different Navigation bars, one for the main page of my web, and another one for the admin page if the user logins. (the login is not implemented yet).
I want to know how to change the NavBar based on the page. If I am in the homepage, NavBar should be there, if I am in admin page, navBarAdmin should be there.
Right now I can only see the NavBar for homepage.

App.js


```

```
import React from "react";
import "./App.css";
import Home from "./Home";
import Buildings from "./Buildings";
import Calender from "./Calender";
import Courses from "./Courses";
import Departments from "./Departments";
import Majors from "./Majors";
import Minor from "./Minor";
import MasterSchedule from "./MasterSchedule";
import TimeWindow from "./TimeWindow";
import Login_Page from "./Login_Page";
import { Routes, Route } from 'react-router-dom';
import NavBar from "./NavBar";

function App() {
  return (
    <div className="App">
      <NavBar />
      <Routes>
      <Route exact path="/" element={<Home />} />
      <Route exact path="/Buildings" element={<Buildings />} />
      <Route exact path="/Calender" element = {<Calender />} />
      <Route exact path = "/Courses" element = {<Courses />} />
      <Route exact path = "/Departments" element = {<Departments />} />
      <Route exact path = "/Majors" element = {<Majors />} />
      <Route exact path = "/Minor" element = {<Minor />} />
      <Route exact path = "/MasterSchedule" element = {<MasterSchedule />} />
      <Route exact path = "/TimeWindow" element = {<TimeWindow />} />
      <Route exact path = "/Login_Page" element = {<Login_Page />} />
      </Routes>
    </div>
  );
}

export default App;
```

```


NavBar.js

```

```
import React from 'react';
import { Link } from 'react-router-dom';
import './Home.css';


function NavBar(){
    return (
<header>
    <div className="topnav" id="myTopnav">
    <Link to= "./" className="active"> Maple Leaf University </Link>
    <div className="dropdown">
      <button className="dropbtn">COURSES</button>
      <div className="dropdown-content">
        <Link to="#" />
        <Link to="./Courses">COURSES</Link>
        <Link to="./MasterSchedule">MASTER SCHEDULE</Link>
      </div>
      
      <button className="dropbtn">MAJORS & MINORS</button>
      <div className="dropdown-content">
        <Link to="#" />
        <Link to="./Majors">MAJORS</Link>
        <Link to="./Minor">MINORS</Link>
      </div>
      "myTopnav" href="./AdminHome">
      </div>
      <div className="dropdown">
        <button className="dropbtn">FACULTY</button>
        <div className="dropdown-content">
          <a href="searchFaculty.html">Search Faculty</a>
          <a href="viewCourses.html">View Courses</a>
        </div>
        ^__i className="fa fa-angle-down" />
      </div>
      <div className="dropdown">
        <button className="dropbtn">ACCOUNT</button>
        <div className="dropdown-content">
          <a href="profile.html">user profile</a>
          <a href="#">Log Out</a>
        </div>
        ^__i className="fa fa-angle-down" />
      </div>
    </div>
  </header>
    );
}
export default NavBarAdmin;
```

```
index.js

```

```
import {createRoot} from 'react-dom/client';
import App from './App';
import {BrowserRouter as Router} from 'react-router-dom';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

// 👇️ wrap App in Router

root.render(
  <Router>
    <App />
  </Router>
);
```

```
I tried adding the admin navBar to App.js
<navBarAdmin /> 
But only the navBarAdmin showed up. i do not know why. for default navBar should appears first.


```

```