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. ``` ```
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)