DEV Community
·
在Vite项目中配置Tanstack路由，包含认证路由和激活路由
💡
原文英文，约700词，阅读约需3分钟。
📝
内容提要
Tanstack路由是基于文件的路由系统，类似于Next.js。安装后需配置Vite和主文件，并使用Zustand管理认证状态。创建路由结构，设置认证和未认证路由，确保登录后更新认证令牌。
🎯
关键要点
- Tanstack路由是基于文件的路由系统，类似于Next.js。
- 安装Tanstack路由需要使用命令：yarn add @tanstack/react-router。
- 需要添加开发依赖：yarn add -D @tanstack/router-devtools @tanstack/router-plugin。
- 配置Vite时需确保与项目兼容，避免布局系统出现问题。
- 在主文件main.tsx中创建认证上下文，并使用Zustand管理认证状态。
- 创建路由结构，包括认证和未认证的路由。
- 在_authenticated.tsx文件中配置认证路由，未认证用户会被重定向到登录页面。
- 登录后需要设置认证令牌并使路由失效以更新状态。
- 使用<Link>组件创建活动链接，确保路径匹配时使用exact: true。
🏷️
标签
➡️
