Click here to Skip to main content
15,560,045 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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.


```

```


What I have tried:

putting the NavBarAdmin in App.js like
<navbaradmin>
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900