代码

我直接就贴上代码，我这边使用的是typescript，每一个文件都是tsx文件 相对来说还是比较简单的，需要的可以直接拷贝过去使用，我把代码传到git上你们自行拿走 代码下载 这一块的是动态路由的路由表的写法

import React, { Suspense, lazy } from 'react' import { useRoutes } from 'react-router-dom' export interface RouterBody { name?: string, path: string, component?: any, element?: any, children?: Array<RouterBody>, } const router: Array<RouterBody> = [ { path: '/', component: lazy(() => import('@/views/home')), children: [ { path: 'tip', component: lazy(() => import('@/views/home/components/tip')) }, { path: 'lll', component: lazy(() => import('@/views/home/components/tip')) }, ] }, { path: '/about', component: lazy(() => import('@/views/about')) }, { path: '*', component: lazy(() => import('@/views/404')) } ] // 路由处理方式 const changeRouter = (routers: Array<RouterBody>): any => { return routers.map(item => { if (item.children) { item.children = changeRouter(item.children) } item.element = <Suspense fallback={ <div>加载中...</div> }> {/* 把懒加载的异步路由变成组件装载进去 */} <item.component /> </Suspense> return item }) } // 必须这样子，不然会报什么hook错误的问题 const Router = () => useRoutes(changeRouter(router)) export default Router

上面的路由表会生成成为一个组件，直接在要使用的地方使用即可

import React from "react" import MyHeader from './header' import MyMain from './main' import MyFooter from './footer' import MyAside from './aside' import Router from '@/router' class Layout extends React.Component{ render() { return ( <div className="container"> <MyHeader /> <article> <MyAside /> // 有点像是一个占位符，我是利用这个v6版本的子路由来渲染的，子路由使用的是Outlet这个标签 <Router /> <MyMain /> </article> <MyFooter /> </div> ) } } export default Layout

子路由的占位符

import React from 'react' import { Outlet } from 'react-router-dom' class MyMain extends React.Component{ render() { return ( <main> {/* react-router-dom自带的子路由组件 */} <Outlet /> </main> ) } } export default MyMain 效果

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。