Rendering components with different layouts/elements using react-router-dom v6: How can I achieve this?

Question

I'm having trouble writing code to render a login page without navigation bar and sidebar. I've come across a few pages asking similar questions, but none seem to fit my current situation.

How to hide navigation bar in react router login page The examples given are great, but I believe the way of accomplishing the same task has changed with react-router-dom v6, which leads me to https://dev.to/iamandrewluca/private-route-in-react- Read about this change in router-v6-lg5

It seems I don't understand some aspects about React Router routing. In the code below I have two routes. I want to render one of the routes (login) without navigation bar and sidebar components.

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>
    </>
  );
};

Another option I've also tried is to move the navbar and sidebar labels into a dashboard component, but then I basically have to do the same copy and paste with any new component. This approach feels wrong and inefficient, but if it's the right approach, I'll do what's necessary

EDIT: I think it's important to include that what it currently does is load the login page that contains the navigation bar and sidebar. The Navigation to Dashboard component has a navigation bar and a sidebar, but this is intentional. I want the login page to have no navigation bar and sidebar

Answer 1

The easiest way to hide the navigation bar is to go to the login page component and call useLocation(). Then, after declaring the usage location, you would do something like this. and assign it to variable position { location.pathname === "/login" ?Empty: (

Render the entire navigation bar component);

Not if you can read while I'm typing on my phone

Answer 2

If I understand your question, you want the navigation and sidebar to be rendered on non-login routes. To do this, you can create a layout component to render them and the nested route's outlets.

Use nested routing

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>
    </>
  );
};

Use routing configurations and useRoutes hooks

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 routing 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} />;
};