Issue: Only renders one navbar instead of two navbars in Reactjs

Question

const Navbar = () => {
  return (
    <div>
      {location === '/' ? (
        <AuthNav />
      ) : location === '/home' && isAuthenticated ? (
        <MainNav />
      ) : <AuthNav />
      }
    </div>
  );
};

How do I render two separate navbars on different application routes, in this case, I want to render the AuthNav in the login and signup path and I want to render MainNav on the home path.

Answer 1

Issues

I think you've a few things working against you:

1. The Navbar component is unconditionally rendered and using window.location.pathname to compute which actual navigation component to render. This means the view to be rendered is only computed when the Navbar component rerenders.
2. The Navbar component is rendered outside the Routes, so it's not rerendered when a route changes.

Solution

Instead of unconditionally rendering Navbar and trying to compute which nav component to render based on any current URL pathname, split them out into discrete layout routes that render the appropriate nav component.

Example:

Navbar.jsx

export const AuthNav = ({ auth }) => {
  ....
};

export const MainNav = () => {
  ....
};

App.jsx

import { Routes, Route, Navigate, Outlet } from 'react-router-dom';
import { useState } from "react";

// components
import { AuthNav, MainNav } from './components/Navbar';

// pages
...

...

const AuthLayout = ({ auth }) => (
  <>
    <AuthNav auth={auth} />
    <Outlet />
  </>
);

const MainLayout = () => (
  <>
    <MainNav />
    <Outlet />
  </>
);

const PrivateRoute = ({ auth }) => {
  return auth.isAuthenticated
    ? <Outlet />
    : <Navigate to="/" replace />;
};

const App = () => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  return (
    <div className='parent'>
      <Routes>
        <Route element={<AuthLayout auth={{ isAuthenticated, setIsAuthenticated }} />}>
          <Route path='/' element={<SignIn />} />
          <Route path='/signup' element={<SignUp />} />
        </Route>
        <Route element={<MainLayout />}>
          <Route element={<PrivateRoute auth={{ isAuthenticated }} />}>
            <Route path='/Home' element={<Home />} />
            <Route path='/music' element={<Music />} />
            <Route path='/genre/' element={<Pop />} />
            <Route path='/Hiphop' element={<HipHop />} />
            <Route path='/Rock' element={<Rock />} />
            <Route path='/EDM' element={<EDM />} />
            <Route path='/Jazz' element={<Jazz />} />
            <Route path='/RandB' element={<RandB />} />
            <Route path='/store' element={<Store />} />
            <Route path='/News' element={<News />} />
            <Route path='/Contact' element={<Contact />} />
            <Route path='/album/:id' element={<Album />} />
            <Route path ="/album/:id/nested/" element={<Albums2 />} />
          </Route>
        </Route>
      </Routes>
    </div>
  );
};