当前位置：首页 > news >正文

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

news 来源：原创 2025/5/8 23:16:17

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;