How to conditionally shot Footer and Nav

[kyusungpark]

Hi, I am tyring to migrate to Tanstack router and have a question.

My current layout looks like below where I show NavBar and Footer conditionally. How would I achieve this in Tanstack Router. I am currently using Filebased routing.

    <div>
      {showNavAndFooter && <NavBar />}
      <Suspense
        fallback={
          <div className="flex min-h-screen items-center justify-center">
            <Spinner />
          </div>
        }
      >
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/sign-in" element={<SignIn />} />
          <Route path="/sign-up" element={<SignUp />} />
          <Route path="/courses/sat" element={<SatOverview />} />

          <Route
            path="/courses/:courseId/:type/practice/:assessmentId"
            element={<PrivateRoute element={<PracticeView />} />}
          />
          <Route path="reports/:assessmentId/response/:responseId" element={<ReportPage />} />
          <Route
            path="reports/:assessmentId/response/:responseId/review"
            element={<ReviewForm />}
          />

          {/* Dashboard Routes */}
          <Route path="/dashboard" element={<PrivateRoute element={<DashboardLayout />} />}>
            <Route path="courses" element={<CourseDashboard />} />
            <Route path="courses/:courseId" element={<CourseDetails />} />
            <Route path="enrollments" element={<EnrollmentDashboard />} />
            <Route path="invitations" element={<InvitationDashboard />} />
            <Route path="schools" element={<SchoolDashboard />} />
            <Route path="schools/:schoolId" element={<SchoolDetails />} />
            <Route path="users" element={<UserDashboard />} />
            <Route path="users/:userId" element={<UserDetails />} />
          </Route>

          <Route path="/terms" element={<Terms />} />
          <Route path="/privacy" element={<Privacy />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />

          {/* Catch all */}
          <Route path="*" element={<PrivateRoute element={<NotFound />} />} />
        </Routes>
      </Suspense>
      {showNavAndFooter && <Footer />}
    </div>

export const Route = createRootRoute({
  component: () => <HomePage />,
});

This is my _root file which renders HomePage. I guess I can add the same conditional check as above, but would I have to do this to every single route that requires Nav and Footer?

Is there a way to just do it once like above?

Thank you!

[schiller-manuel]

you would not need to repeat those checks in each route. Your root component just needs to render an <Outlet>. This is where the actual routes will be rendered:

simple example:

function HomePage() {
const showNavAndFooter = true

return (<>
      {showNavAndFooter && <NavBar />}
      <Outlet />
      {showNavAndFooter && <Footer />}
</>)
}

export const Route = createRootRoute({
  component: () => <HomePage />,
});

[kyusungpark]

I just realized that there is a weird behavior.

I implemented the logic here like below:

const RootLayout = () => {
  const router = useRouter();
  const { pathname } = router.state.location;

  const showNavAndFooter = !pathname.includes('/practice') && !pathname.includes('/review');

  return (
    <>
      {showNavAndFooter && <NavBar />}
      <Outlet />
      <TanStackRouterDevtools position="bottom-right" />
      {showNavAndFooter && <Footer />}
    </>
  );
};

I use navigate to go to a route using the below with a click of a button:

                <Button
                  disabled={disabled}
                  onClick={() =>
                    navigate({
                      to: '/practice/courses/$courseId/$type/$assessmentId',
                      params: {
                        courseId,
                        type: course?.type || '',
                        assessmentId: selectedTest?.value || '',
                      },
                    })
                  }
                >
                  Start Test
                </Button>

Not, when I get on to the page, I still see the nav and footer. It's only when I refresh that it hides them both. Any ideas why this might be happening/ I had the pretty much logic in Reactor Router and didn't have this issue.

[schiller-manuel]

useRouter is not reactive. use useRouterState instead.