tanstack动态路由 + router/ 目录管理方案

1. 项目结构

src/
├── router/
│   ├── rootRoute.tsx
│   ├── staticRoutes.tsx
│   ├── dynamicRoutes.tsx
│   └── index.tsx
├── main.tsx
├── pages/
│   ├── Home.tsx
│   ├── About.tsx
│   └── Admin.tsx
└── components/
    └── Navigation.tsx

2. router/rootRoute.tsx

根路由负责放 Outlet：

import { createRootRoute, Outlet } from '@tanstack/react-router';
import Navigation from '@/components/Navigation'; // 导航栏

export const rootRoute = createRootRoute({
  component: () => (
    <div>
      <Navigation />
      <Outlet />
    </div>
  ),
});

3. router/staticRoutes.tsx

这里放不需要权限的静态路由，比如首页、关于页：

import { createRoute } from '@tanstack/react-router';
import { rootRoute } from './rootRoute';
import Home from '@/pages/Home';
import About from '@/pages/About';

export const homeRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/',
  component: Home,
});

export const aboutRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/about',
  component: About,
});

4. router/dynamicRoutes.tsx

这里根据权限动态生成路由，比如 admin 权限才能看到：

import { createRoute } from '@tanstack/react-router';
import { rootRoute } from './rootRoute';
import Admin from '@/pages/Admin';

export const adminRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/admin',
  component: Admin,
});

5. router/index.tsx

import { createRouter } from '@tanstack/react-router';
import { rootRoute } from './rootRoute';
import { homeRoute, aboutRoute } from './staticRoutes';
import { adminRoute } from './dynamicRoutes';

// ⚡️ 动态控制路由
const user = {
  role: 'admin', // 你可以换成从登录信息里拿
};

const childrenRoutes = [homeRoute, aboutRoute];

// 如果是管理员，加上 admin 页面
if (user.role === 'admin') {
  childrenRoutes.push(adminRoute);
}

// 组装 router
export const router = createRouter({
  routeTree: rootRoute.addChildren(childrenRoutes),
});

// 类型声明
declare module '@tanstack/react-router' {
  interface Register {
    router: typeof router;
  }
}

6. main.tsx 使用

入口不变，还是：

import { RouterProvider } from '@tanstack/react-router';
import { router } from './router';

function App() {
  return <RouterProvider router={router} />;
}

export default App;

✨ 总结

router/ 目录：拆成 root、静态路由、动态路由。
index.tsx 动态组合出符合权限的路由。

保持代码清晰又灵活，后期新增权限、新页面非常方便！