TanStackT
TanStack2y ago
10 replies
colossal-harlequin

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
Reddit
Explore this post and more from the react community
From the react community on Reddit
Stack Overflow
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 o...
Tanstack Router Conditional Rendering
Was this page helpful?