这篇文章主要讲解了“react-router v6怎么实现动态路由”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“react-router v6怎么实现动态路由”吧！
大致思路就是：先只在路由表配置默认路由，例如登录页面，404页面。再等待用户登录成功后，获取到用户权限列表和导航列表，写一个工具函数递归调用得出路由表，在根据关键字映射成组件，最后返回得到新的路由表。
流程如下
用户登录成功
获取用户权限列表
获取用户导航菜单列表
根据权限和导航生成路由表
计算
安全
数据库
网络和加速
企业服务
import { lazy } from "react";
import { Navigate } from "react-router-dom";
// React 组件懒加载
// 快速导入工具函数
const lazyLoad = (moduleName: string) => {
const Module = lazy(() => import(`views/${moduleName}`));
return <Module />;
};
// 路由鉴权组件
const Appraisal = ({ children }: any) => {
const token = localStorage.getItem("token");
return token ? children : <Navigate to="/login" />;
};
interface Router {
name?: string;
path: string;
children?: Array<Router>;
element: any;
}
const routes: Array<Router> = [
{
path: "/login",
element: lazyLoad("login"),
},
{
path: "/",
element: <Appraisal>{lazyLoad("sand-box")}</Appraisal>,
children: [
{
path: "",
element: <Navigate to="home" />,
},
{
path: "*",
element: lazyLoad("sand-box/nopermission"),
},
],
},
{
path: "*",
element: lazyLoad("not-found"),
},
];
export default routes;注意带 //import! 的标识每次导航列表更新时，再触发路由更新action
handelFilterRouter 就是根据导航菜单列表 和权限列表 得出路由表的
import { INITSIDEMENUS, UPDATUSERS, LOGINOUT, UPDATROUTES } from "./contant";
import { getSideMenus } from "services/home";
import { loginUser } from "services/login";
import { patchRights } from "services/right-list";
import { handleSideMenu } from "@/utils/devUtils";
import { handelFilterRouter } from "@/utils/routersFilter";
import { message } from "antd";
// 获取导航菜单列表
export const getSideMenusAction = (): any => {
return (dispatch: any, state: any) => {
getSideMenus().then((res: any) => {
const rights = state().login.users.role.rights;
const newMenus = handleSideMenu(res, rights);
dispatch({ type: INITSIDEMENUS, menus: newMenus });
dispatch(updateRoutesAction()); //import!
});
};
};
// 退出登录
export const loginOutAction = (): any => ({ type: LOGINOUT });
// 更新导航菜单
export const updateMenusAction = (item: any): any => {
return (dispatch: any) => {
patchRights(item).then((res: any) => {
dispatch(getSideMenusAction());
});
};
};
// 路由更新 //import!
export const updateRoutesAction = (): any => {
return (dispatch: any, state: any) => {
const rights = state().login.users.role.rights;
const menus = state().login.menus;
const routes = handelFilterRouter(rights, menus); //import!
dispatch({ type: UPDATROUTES, routes });
};
};
// 登录
export const loginUserAction = (item: any, navigate: any): any => {
return (dispatch: any) => {
loginUser(item).then((res: any) => {
if (res.length === 0) {
message.error("用户名或密码错误");
} else {
localStorage.setItem("token", res[0].username);
dispatch({ type: UPDATUSERS, users: res[0] });
dispatch(getSideMenusAction());
navigate("/home");
}
});
};
};说一说我这里为什么要映射element 成对应组件这部操作，原因是我使用了redux-persist（redux持久化）, 不熟悉这个插件的可以看看我这篇文章：redux-persist若是直接转换后存入本地再取出来渲染是会有问题的，所以需要先将element保存成映射路径，然后渲染前再进行一次路径映射出对应组件。
每个后台的数据返回格式都不一样，需要自己去转换，我这里的转换仅供参考。ps:defaulyRoutes和默认router/index.ts导出是一样的，可以做个小优化，复用起来。
import { lazy } from "react";
import { Navigate } from "react-router-dom";
// 快速导入工具函数
const lazyLoad = (moduleName: string) => {
const Module = lazy(() => import(`views/${moduleName}`));
return <Module />;
};
const Appraisal = ({ children }: any) => {
const token = localStorage.getItem("token");
return token ? children : <Navigate to="/login" />;
};
const defaulyRoutes: any = [
{
path: "/login",
element: lazyLoad("login"),
},
{
path: "/",
element: <Appraisal>{lazyLoad("sand-box")}</Appraisal>,
children: [
{
path: "",
element: <Navigate to="home" />,
},
{
path: "*",
element: lazyLoad("sand-box/nopermission"),
},
],
},
{
path: "*",
element: lazyLoad("not-found"),
},
];
// 权限列表 和 导航菜单 得出路由表 element暂用字符串表示 后面渲染前再映射
export const handelFilterRouter = (
rights: any,
menus: any,
routes: any = []
) => {
for (const menu of menus) {
if (menu.pagepermisson) {
let index = rights.findIndex((item: any) => item === menu.key) + 1;
if (!menu.children) {
if (index) {
const obj = {
path: menu.key,
element: `sand-box${menu.key}`,
};
routes.push(obj);
}
} else {
handelFilterRouter(rights, menu.children, routes);
}
}
}
return routes;
};
// 返回最终路由表
export const handelEnd = (routes: any) => {
defaulyRoutes[1].children = [...routes, ...defaulyRoutes[1].children];
return defaulyRoutes;
};
// 映射element 成对应组件
export const handelFilterElement = (routes: any) => {
return routes.map((route: any) => {
route.element = lazyLoad(route.element);
return route;
});
};import routes from "./router";
import { useRoutes } from "react-router-dom";
import { shallowEqual, useSelector } from "react-redux";
import { useState, useEffect } from "react";
import { handelFilterElement, handelEnd } from "@/utils/routersFilter";
import { deepCopy } from "@/utils/devUtils";
function App() {
console.log("first");
const [rout, setrout] = useState(routes);
const { routs } = useSelector(
(state: any) => ({ routs: state.login.routes }),
shallowEqual
);
const element = useRoutes(rout);
// 监听路由表改变重新渲染
useEffect(() => {
// deepCopy 深拷贝state数据 不能影响到store里的数据！
// handelFilterElement 映射对应组件
// handelEnd 将路由表嵌入默认路由表得到完整路由表
const end = handelEnd(handelFilterElement(deepCopy(routs)));
setrout(end);
}, [routs]);
return <div className="height-all">{element}</div>;
}
export default App;感谢各位的阅读，以上就是“react-router v6怎么实现动态路由”的内容了，经过本文的学习后，相信大家对react-router v6怎么实现动态路由这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
