如何用React Router v6构建长尾词式的动态路由？

本文共计1448个文字，预计阅读时间需要6分钟。

目录+前言+思路+实现动态路由+router/index.ts+默认路由+redux+login/action.ts+utils+工具函数处理+App.tsx+前言+最近在肝一个后台管理项目，使用的框架是react18+ts，路由用的是v6，当需要实现根数据权限时+

目录

• 前言
• 思路
• 实现动态路由
• router/index.ts 默认路由
• redux login/action.ts
• utils 工具函数处理
• App.tsx

前言

最近在肝一个后台管理项目，用的是react18 + ts 路由用的是v6，当需要实现根据权限动态加载路由表时，遇到了不少问题。

v6相比于v5做了一系列改动，通过路由表进行映射就是一个很好的改变（个人认为），但是怎么实现根据权限动态加载路由表呢？我也是网站上找了许多资料发现大部分还是以前版本的动态路由，要是按照现在的路由表来写肯定是不行的。难不成又要写成老版本那样错综复杂？只能自己来手写一个了，如有更好的方法望大佬们不吝赐教。

思路

大致思路就是：先只在路由表配置默认路由，例如登录页面，404页面。