adverse-sapphire

Tanstack Router Conditional Rendering

I have a routing setup with u/tanstack/react-router where I need to conditionally render components based on the active route. Specifically, I want the InstructorDashboardComponent to be rendered only when the route is /instructor-dashboard, and when the route is /instructor-dashboard/course-builder, the CourseBuilderComponent should be rendered instead. Currently, with the given code, the InstructorDashboardComponent is always rendered at the top of the file, even when the route is /instructor-dashboard/course-builder, resulting in both the InstructorDashboardComponent and CourseBuilderComponent being displayed. How can I conditionally render the InstructorDashboardComponent based on the active route to ensure it does not appear when the route is /instructor-dashboard/course-builder? Please refer to this post I made on redit or StackOverflow for a clear view of the components: Redit: https://www.reddit.com/r/react/comments/1e4p1jb/tanstack_router_conditional_rendering/ StackOverflow: https://stackoverflow.com/questions/78755000/tanstack-router-conditional-rendering

From the react community on Reddit

Explore this post and more from the react community

Stack Overflow

8 Replies

optimistic-gold•14mo ago

There's two approaches here. If the InstructorDashboardComponent is only meant to be shown on the "/instructor-dashboard" route, then you should probably be using a index token route. Like this.

// src/routes/instructor-dashboard.index.tsx
export const Route = createFileRoute("/instructor-dashboard")({
  loader: async () => {
    // load with Tanstack query
  },
  component: () => (
    <MaxWidthWrapper className="h-screen">
      <InstructorDashboardComponent />
    </MaxWidthWrapper>
  ),
});

// src/routes/instructor-dashboard.index.tsx
export const Route = createFileRoute("/instructor-dashboard")({
  loader: async () => {
    // load with Tanstack query
  },
  component: () => (
    <MaxWidthWrapper className="h-screen">
      <InstructorDashboardComponent />
    </MaxWidthWrapper>
  ),
});

adverse-sapphireOP•14mo ago

So I take it that I thgen just change the file name by adding in index?

optimistic-gold•14mo ago

However, if the InstructorDashboardComponent is more like a header, that may show up other routes (ie. /instructor-dashboard/foo and /instructor-dashboard/bar but not /instructor-dashboard/course-builder), then you could use the useLocation hook to conditionally hide/display the component as you see fit.

// src/routes/instructor-dashboard.tsx
export const Route = createFileRoute("/instructor-dashboard")({
  loader: async () => {
    // load with Tanstack query
  },
  component: () => {
    const location = useLocation()
    const condition = /** something */
    return (
    <MaxWidthWrapper className="h-screen">
      {conditon && <InstructorDashboardComponent />}
      <Outlet />
     </MaxWidthWrapper>
    )
  },
});

// src/routes/instructor-dashboard.tsx
export const Route = createFileRoute("/instructor-dashboard")({
  loader: async () => {
    // load with Tanstack query
  },
  component: () => {
    const location = useLocation()
    const condition = /** something */
    return (
    <MaxWidthWrapper className="h-screen">
      {conditon && <InstructorDashboardComponent />}
      <Outlet />
     </MaxWidthWrapper>
    )
  },
});

Yes, and remove the Outlet since the index route wouldn't have any child matches being shown within it

adverse-sapphireOP•14mo ago

I am going to try this right away. The course-builder route should still stay: /instructor-dashboard/course-builder ?

optimistic-gold•14mo ago

Yup, that route should be fine

adverse-sapphireOP•14mo ago

This worked perfectly. Thank you so much. 😬

optimistic-gold•14mo ago

👍🏼

optimistic-gold•14mo ago

You may want to read up on these two: https://tanstack.com/router/latest/docs/framework/react/guide/routing-concepts https://tanstack.com/router/latest/docs/framework/react/guide/file-based-routing

Routing Concepts | TanStack Router React Docs

TanStack Router supports a number of powerful routing concepts that allow you to build complex and dynamic routing systems with ease. The Root Route

File-Based Routes | TanStack Router React Docs

Most of the TanStack Router documentation is written for file-based routing. This guide is mostly intended to help you understand in more detail how to configure file-based routing and the technical details behind how it works. Prerequisites

Gaming

Programming

Tanstack Router Conditional Rendering

Did you find this page helpful?