Conditionally hide root navigation bar on certain pages

[srahimeen]

I would like to conditionally hide the navbar in some of the pages of my app. I didn't find a direct way to do this in the docs.

I have a Vite React app with the following set up.

routes/__root.tsx

import { createRootRoute, Link, Outlet } from "@tanstack/react-router";
import { TanStackRouterDevtools } from "@tanstack/router-devtools";

export const Route = createRootRoute({
  component: RootComponent,
});

function RootComponent() {
  return (
    <>
      <div className="flex gap-2 p-2">
        <Link to="/" className="[&.active]:font-bold">
          Home
        </Link>{" "}
        <Link to="/about" className="[&.active]:font-bold">
          About
        </Link>
        <Link to="/login" className="[&.active]:font-bold">
          Login
        </Link>
      </div>
      <hr />
      <Outlet />
      <TanStackRouterDevtools />
    </>
  );
}

routes/login.lazy.tsx

import LoginPage from "@/pages/LoginPage";
import { createLazyFileRoute } from "@tanstack/react-router";

export const Route = createLazyFileRoute("/login")({
  component: Login,
});

function Login() {
  return <LoginPage />;
}

src/pages/LoginPage.tsx

import { Button } from "@/components/ui/button";

function LoginPage() {
  return (
    <div>
      <h1 className="p-2">Login</h1>
      <Button>Log in</Button>
    </div>
  );
}

export default LoginPage;

By default, the navbar from __root.tsx is visible on the pages for all my routes. I would like to hide this navbar in my LoginPage.

Is it possible to do this with TanStack router?

[Shunseii]

maybe there's a cleaner way, but you can just fetch the user's auth and then conditionally render the navbar in the root component

const Nav = () => {
  return (
    <div className="p-2 flex gap-2">
      <Link to="/" className="[&.active]:font-bold">
        Home
      </Link>{" "}
      <Link to="/about" className="[&.active]:font-bold">
        About
      </Link>

      <Button>
        Logout
      </Button>
    </div>
  );
};

const Root = () => {
  const isAuthenticated = () => { ... };

  return (
    <>
      {isAuthenticated() ? (
        <>
          <Nav />
        </>
      ) : undefined}

      <Outlet />

      <React.Suspense>
        <TanStackRouterDevtools />
      </React.Suspense>
    </>
  );
};

[srahimeen]

I need to show the navbar to unauthenticated users too.

I just need to hide it specifically in the LoginPage route.

Basically looking for something like:

const hideNavRoutes = ["/login", "/secret", ...]

const currentRoute = useRoute();

return (
    <>
      {!hideNavRoutes.includes(currentRoute) ? (
        <>
          <Nav />
        </>
      ) : undefined}

      <Outlet />

      <React.Suspense>
        <TanStackRouterDevtools />
      </React.Suspense>
    </>
  );
  

Is that possible?

[Shunseii]

ah you can try useMatchRoute so something like

const matchRoute = useMatchRoute();

const matchedLoginRoute = matchRoute({ to: "/login" });

return (
  <>
    {matchedLoginRoute ? (
      <Nav />
    ) : undefined}
    
    // ...
  </>
)

for multiple routes:

const matchRoute = useMatchRoute();
const hideNavRoutes = ["/login", "/secret", ...];

const matchedNoNavRoutes = hideNavRoutes.some((route) => matchRoute({ to: route }));

return ( ... );

for the latter, also check out useMatches.

you could also modify your route structure so that anything that needs the nav is inside of a layout route (with a _ prefix) and then, if necessary, turn any routes that don't need the navbar into siblings using the _ suffix, but maybe check out the hooks first and lmk how they work for you

[srahimeen]

That solved the issue, thanks for the info. I think for now I will be using the hook to programmatically render the NavBar.

import NavBar from "@/components/NavBar";
import { createRootRoute, Outlet, useMatchRoute } from "@tanstack/react-router";
import { TanStackRouterDevtools } from "@tanstack/router-devtools";

export const Route = createRootRoute({
  component: RootComponent,
});

function RootComponent() {
  const hideNavRoutes = ["/login"];

  const matchRoute = useMatchRoute();

  const matchedHideNavRoutes = hideNavRoutes.some((route) =>
    matchRoute({ to: route }),
  );

  return (
    <>
      {!matchedHideNavRoutes ? <NavBar /> : undefined}
      <hr />
      <Outlet />
      <TanStackRouterDevtools />
    </>
  );
}

Thank you for the assist!