18

I am having trouble writing code to render a login page with no navbar and sidebar. I have come across some pages that ask similar questions but none seem to pertain to my current situation.

How to hide navbar in login page in react router the example given is great but I believe the way of accomplishing that same task has changed with react-router-dom v6 leading me to read about this change in https://dev.to/iamandrewluca/private-route-in-react-router-v6-lg5

It seems I am not understanding a certain aspect about routing with React Router. In the code below I have two Routes. One of the routes(Login) I would like to have render without the NavBar and SideBar component.

const App = () => {
  return (
    <>
      <Routes>
        <Route path="/login" element={<LoginPage />} />
      </Routes>

      <NavBar />
      <SideBar />
      <main className={styles["main--container"]}>
        <div className={styles["main--content"]}>
          <Routes>
            <Route path="/" element={<Dashboard />} />
          </Routes>
        </div>
      </main>
    </>
  );
};

An alternative, that I also tried, would be to move the NavBar and SideBar tags into the Dashboard component, but then I would essentially have to do the same copy and paste for any new components. This method felt wrong and inefficient , but if this is the correct way of doing it I will do the needful

Edit: I think it's important to include what it currently does is load the Login page with the NavBar and SideBar included. Navigating to the dashboard component has the NavBar and SideBar but this is intended. What I would like is for the Login page not to have the NavBar and SideBar

Drew Reese
  • 165,259
  • 14
  • 153
  • 181
RockoDaBoat
  • 183
  • 1
  • 1
  • 7

2 Answers2

34

If I understand your question, you are wanting to render the nav and sidebar on the non-login route. For this you can create a layout component that renders them and an outlet for the nested routes.

Using nested routes

import { Outlet } from 'react-router-dom';

const AppLayout = () => (
  <>
    <NavBar />
    <SideBar />
    <main className={styles["main--container"]}>
      <div className={styles["main--content"]}>
        <Outlet /> // <-- nested routes rendered here
      </div>
    </main>
  </>
);

const App = () => {
  return (
    <>
      <Routes>
        <Route path="/login" element={<LoginPage />} />
        <Route element={<AppLayout />} >
          <Route path="/" element={<Dashboard />} /> // <-- nested routes
        </Route>
      </Routes>
    </>
  );
};

Using a routes configuration and useRoutes hook

const routesConfig = [
  {
    path: "/login",
    element: <LoginPage />,
  },
  {
    element: <AppLayout />,
    children: [
      {
        path: "/",
        element: <Dashboard />,
      },
    ],
  },
];

...

import { useRoutes } from 'react-router-dom';

const App = () => {
  const routes = useRoutes(routesConfig);

  return routes;
};

Using a routes configuration and data routers (introduced in v6.4.0)

const routesConfig = [
  {
    path: "/login",
    element: <LoginPage />,
  },
  {
    element: <AppLayout />,
    children: [
      {
        path: "/",
        element: <Dashboard />,
      },
    ],
  },
];

...

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter(routesConfig);

const App = () => {
  return <RouterProvider router={router} />;
};
Drew Reese
  • 165,259
  • 14
  • 153
  • 181
  • This worked very well. I'll have to do some more reading on Outlet. It appears in react router v5 nested routes were defined explicitly but with Outlet it is no longer the case – RockoDaBoat Nov 17 '21 at 05:44
  • @RockoDaBoat Yes, in RRDv6 nested routing is built using relative linking/routing so you don't need to use the current nested level's `url` and `path` to build them out. The API is much improved. – Drew Reese Nov 17 '21 at 06:09
  • how do you check for auth in AppLayout? – ryanadhi Jul 18 '22 at 13:50
  • @RyanAdhi I'd suggest creating a separate layout route specific to handling authentication checks and redirecting users to login routes. See my answer [here](/a/66289280/8690857) for an example. – Drew Reese Jul 19 '22 at 05:29
0

The easiest way for you to hide the navbar would be to go to the login page component and call useLocation(). Then you woulf do something like this after declaring the use location. And assigning it to a variable location { location.pathname === "/login" ? null : (

Render the whole navbar component);

Not sute if you can be able to read as I type from my phone

Ahmad Salihu
  • 13
  • 7