动态路由的创建和动态菜单的创建几乎类似，只不过的是，动态路由需要导入组件。这样才能完成跳转。
动态路由与动态菜单一样都需要封装一个转化函数，将后端传来的数据进行转换，转换成我们需要的格式。
需要导入的依赖
导入路由useRoutes
import {useRoutes} from 'react-router-dom'
导入useEffect, useState进行异步请求和保存路由表
import { useEffect, useState } from 'react'
导入axios
import $api from './request/index'
导入高阶组件进行二级路由的渲染
import withLoadable from './hoc/withLoadable'
导入鉴权组件
import Auth from './components/Auth'
导入登录和首页的组件，因为路由表中的一级路由是登录和首页
const Login = withLoadable(()=>import('./views/Login/Login'))
const Home = withLoadable(()=>import('./views/homePage/Home.jsx'))
在App组件中我们需要返回的是路由表，所以将配置好后的路由表传给useRoutes，
useRoutes中路由表有三个属性：path，element,children
转化函数依旧是使用的是递归来进行动态获取多级路由
1️⃣：首先调用获取路由的接口，并且将获取的数据传送到转换函数中
const getMenus = async()=>{
let result = await $api.login.getMenus()
let RoutesAry = transformRouter(result.data)
routes[1].children = RoutesAry
// 这里可以解决页面按F5出现白屏，需要深拷贝
setRoutes([...routes])
}
2️⃣：编写转换函数
const transformRouter = (RouterList)=>{
function transform(RouterList){
if(RouterList && RouterList.length >0){
RouterList.forEach(item=>{
if(item.childList&&item.childList.length>0){
item.childList.forEach(subItem=>{
const Module = withLoadable(()=>import(`./views${subItem.component}`))
let routeItem={
path:subItem.component,
element:<Module></Module>
}
RoutesAry.push(routeItem)
transform(item.childList,RoutesAry)
})
}else{
const Module = withLoadable(()=>import(`./views${item.component}`))
let routeItem={
path:item.component,
element:<Module></Module>
}
RoutesAry.push(routeItem)
}
})
}
}
let RoutesAry = []
transform(RouterList,RoutesAry)
return RoutesAry
}转化函数的步骤：
- 首先对传进来的RouterList进行遍历，因为我们跳转是从二级路由开始跳转的，所以我们要对传进来的数据进行forEach遍历取里面的二级路由数据。
- 再取得二级路由以后我们需要对二级路由进行判断，如果childList有并且长度需大于0
- childList判断完之后，对childList进行遍历
- 使用高阶组件withLoadable，将二级菜单的组件传输到高阶组件之中。
const Module = withLoadable(()=>import(`./views${subItem.component}`)- 因为路由表是一个数组包对象的结构，对象里面包括path属性和element属性。所以定一个routeItem对象，将Module组件和subItem.component给对象里的属性进行赋值。
对象创建好后，将routeItem添加到RoutesAry数组中。
注意：这里需要注意的是，如果不递归的话，他只能进行到二级路由，只有递归了，多级路由才能被添加进去。
- 当一级路由没有二级路有的话，我们直接将一级路由添加到RoutesAry数组中。
- 数组转化完成后，将转化好后的数据赋值给一个新数组RoutesAry，并且将这个数组赋值给路由表中一级路由home组件的children属性。
let RoutesAry = transformRouter(result.data)
console.log(result.data);
routes[1].children = RoutesAry
// 这里可以解决页面按F5出现白屏，需要深拷贝
setRoutes([...routes])注意：我们把路由表配置好后，都要统一用useState保存路由表，然后将路由表传给useRoutes函数
return useRoutes(routes)解决首次进入路由白屏的问题：
当我们登录成功后，进入主页面进行路由跳转时我们发现此时页面发生白屏现象。这是因为useState只在组件初次加载的时候进行调用，所以会出现白屏现象，我们只需要将路由表进行一个深拷贝传入setRoutes函数中就可以解决白屏。
const [routes,setRoutes] = useState([
{
path:'/login',
element:<Login></Login>
},
{
path:'/',
element:<Auth><Home></Home></Auth>
}
])
const getMenus = async()=>{
let result = await $api.login.getMenus()
let RoutesAry = transformRouter(result.data)
console.log(result.data);
routes[1].children = RoutesAry
// 这里可以解决页面按F5出现白屏，需要深拷贝
setRoutes([...routes])
}完整的代码：
