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。
❓
延伸问答
如何在Vite项目中安装Tanstack路由？
使用命令：yarn add @tanstack/react-router，并添加开发依赖：yarn add -D @tanstack/router-devtools @tanstack/router-plugin。
Tanstack路由的认证路由如何配置？
在_authenticated.tsx文件中配置认证路由，未认证用户会被重定向到登录页面。
如何管理用户的认证状态？
使用Zustand创建hooks来管理认证状态，设置和移除认证令牌。
在Vite中配置Tanstack路由时需要注意什么？
确保配置与项目兼容，避免布局系统出现问题。
如何创建活动链接以匹配路由？
使用<Link>组件创建活动链接，并确保路径匹配时使用exact: true。
登录后如何更新认证令牌？
在登录成功后调用setAuthToken设置认证令牌，并使路由失效以更新状态。
🏷️
标签
➡️
