How to displays different NavBars on different pages, react router version 6?

Question

So my website is gonna have three differently styled views for account types student, teacher and admin (its a dummy e-learning platform). I want to have a different styled navbar for student (two different versions for logged in and logged out) then a different one for teacher (again one for logged in and logged out) and then another one for admin(single one for logged in).

This is what Im doing right now. I made a layout component which warps everything.

const Layout: FC<LayoutProps> = (props) => {
  return (
    <div className="flex flex-col min-h-screen dark:bg-gray-800">
      <MainNavigationBar />
      <main className="mx-auto flex-grow" style={{ width: "90%" }}>
        {props.children}
      </main>
      <Footer />
    </div>
  );
};
export default Layout;

Then this is what my App.tsx looks like.

export default function App() {
  return (
    <Layout>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/signup" element={<SignUpPage />} />
        <Route path="/login" element={<LogInPage />} />
        <Route path="/cart" element={<EmptyCart />} />
        <Route path="/cart/:studentId" element={<ShoppingCart />} />
        <Route path="/checkout/:studentId" element={<CheckOutPage />} />
      </Routes>
    </Layout>
  );
}

As you can see there are no routes for the teacher and admin yet because idk what is the best was to implement the functionality where each account type has different Navbar essentially meaning a totally different view style.

I have thought of two ways but help me understand which one is better.

I put navbar directly inside each pages component. but that would mean that there will be copies of nav bar on each page for the account types and then updating changes would be hard, feels inefficent.
I put all three nav bars in the App.tsx file and then conditionally render nav bar depending on which account type is active. this sounds better cause there will only be one nav bar copy per all account type pages. but problem with this is that idk how to trigger/set "account type active" when "/teacher" or "/admin" is visited.

Help me understand the best practice or technique, this is my first big project, thank you.

The third option, use [Layout Routes](https://reactrouter.com/docs/en/v6/getting-started/concepts#layout-routes) to render common UI/logic to a set of routes. — Drew Reese, Jun 30 '22 at 16:07
Maan this is what I was looking for, so clean, so logical, thank you so much! — itsDanial, Jul 01 '22 at 01:09

score -1 · Answer 1 · answered Jun 30 '22 at 12:38

You should conditionally render the header based on the type of user that is logged in. Based on the routes, I'm guessing your app will have some sort of user auth. You could have a global state using either Context API or a library like Redux, in which you'd save your logged-in users' account data (which includes the account type). You could then conditionally render a navbar that corresponds to the account type.

You can learn more about context here, and Redux here.

score -1 · Answer 2 · answered Jun 30 '22 at 12:55

I was having the same scenario and I solved it by fetching the type of user :

  const { user } = props;
  switch (user?.role) {
    case "STUDENT":
      return <Student />;
    case "TEACHER":
      return <Teacher />;
    case "ADMIN":
      return <Admin />;
    default:
      return <div className="">User not valid.</div>;
  }

I am sharing you my code :

import React from "react";
import { Switch, Route } from "react-router-dom";
import Profile from "../pages/Profile";
import Dashboard from "../pages/Dashboard";
import {Student, Teacher, Admin} from "./User";
import { useSelector } from "react-redux";

const Content = (props) => {
  const { user } = props;
  if (!user) {
    return <div className="">User not valid.</div>;
  }

  switch (user?.role) {
    case "STUDENT":
      return <Student />;
    case "TEACHER":
      return <Teacher />;
    case "ADMIN":
      return <Admin />;
    default:
      return <div className="">User not valid.</div>;
  }
};

export default function Routes() {
  const user = useSelector((s) => s.auth.user);

  return (
    <Switch>
      <Route exact path={"/profile"} component={Profile} />
      <Route exact path={"/dashboard"} component={Dashboard} />
      <Content user={user}/>
    </Switch>
  );
}

You can take help from my above code .

How to displays different NavBars on different pages, react router version 6?

2 Answers2