TanStack React Router路由组件条件渲染问题解决方案咨询

问题 #

使用@tanstack/react-router配置路由时，需要实现以下渲染逻辑：

• 仅当路由为/instructor-dashboard时，渲染InstructorDashboardComponent
• 当路由为/instructor-dashboard/course-builder时，仅渲染CourseBuilderComponent

当前主路由会始终渲染InstructorDashboardComponent，进入子路由时两个组件同时显示。尝试通过Route.fullPath判断，但因子路由嵌套主路由，该判断始终为true无法生效。

当前主路由代码 #

import { createFileRoute, Outlet } from "@tanstack/react-router";
import MaxWidthWrapper from "../components/common/MaxWidthWrapper";
import InstructorDashboardComponent from "../components/InstructorDashboard/InstructorDashboardComponent";

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

子路由代码 #

import { createFileRoute } from "@tanstack/react-router";
import MaxWidthWrapper from "../components/common/MaxWidthWrapper";
import CourseBuilderComponent from "../components/InstructorDashboard/CourseBuilderComponent";

export const Route = createFileRoute("/instructor-dashboard/course-builder")({
  loader: async () => {
    // load with Tanstack query
  },
  component: () => (
    <MaxWidthWrapper className="h-screen">
      <CourseBuilderComponent
        courseContent={[]}
        courseTabInfo={{
          id: 123,
          courseName: "",
          longDescription: "",
          shortDescription: "",
          supportedGrades: "",
          supportedLanguages: "",
        }}
      />
    </MaxWidthWrapper>
  ),
});

尝试修改后的主路由代码（未生效） #

import { createFileRoute, Outlet } from "@tanstack/react-router";
import MaxWidthWrapper from "../components/common/MaxWidthWrapper";
import InstructorDashboardComponent from "../components/InstructorDashboard/InstructorDashboardComponent";

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

解决方案 #

问题核心是Route.fullPath是路由定义的静态路径，并非当前激活的实际路由路径。以下两种方案可实现需求：

方案1：通过useRouter获取当前激活路由 #

在主路由组件中使用useRouter钩子获取当前路由的fullPathname，判断是否为根路径：

import { createFileRoute, Outlet, useRouter } from "@tanstack/react-router";
import MaxWidthWrapper from "../components/common/MaxWidthWrapper";
import InstructorDashboardComponent from "../components/InstructorDashboard/InstructorDashboardComponent";

export const Route = createFileRoute("/instructor-dashboard")({
  loader: async () => {
    // load with Tanstack query
  },
  component: () => {
    const router = useRouter();
    const isRootRoute = router.state.location.fullPathname === "/instructor-dashboard";
    
    return (
      <MaxWidthWrapper className="h-screen">
        {isRootRoute ? <InstructorDashboardComponent /> : <Outlet />}
      </MaxWidthWrapper>
    );
  },
});

方案2：拆分主路由为独立索引路由 #

将/instructor-dashboard的内容移到索引路由（/instructor-dashboard/index），主路由仅负责渲染Outlet，子路由会自动替换索引路由内容：

修改后的主路由

import { createFileRoute, Outlet } from "@tanstack/react-router";
import MaxWidthWrapper from "../components/common/MaxWidthWrapper";

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

新增索引路由（/instructor-dashboard/index.tsx）

import { createFileRoute } from "@tanstack/react-router";
import InstructorDashboardComponent from "../components/InstructorDashboard/InstructorDashboardComponent";

export const Route = createFileRoute("/instructor-dashboard/index")({
  loader: async () => {
    // 原主路由的loader逻辑
  },
  component: () => <InstructorDashboardComponent />,
});

子路由代码保持不变，访问/instructor-dashboard时渲染索引路由组件，访问/instructor-dashboard/course-builder时渲染子路由组件，不会同时显示。

内容的提问来源于stack exchange，提问作者Jonker