3.1 页面布局Flex与Grid

image.png

3.2 React-router路由

React-router路由需要使用6.0的版本yarn add react-router@6 react-router-dom@6。需要解决的问题是动态路由和组件动态加载。

3.2.1 服务器端返回数据

  1. "user":{
  2.           username: "admin",
  3.           token: "123456",
  4.           menus: [{id: "menu-1",
  5.               name: '用户管理',
  6.               url: '/users',
  7.               component: './user'
  8.             },
  9.             {
  10.               id: "menu-3",
  11.               name: "数据管理",
  12.               children: [{
  13.                   id: "menu-3-1",
  14.                   name: '地区数据',
  15.                   url: '/region',
  16.                   component: './region'
  17.                 },
  18.                 {
  19.                   id: "menu-3-2",
  20.                   name: '行政单位数据',
  21.                   url: '/executive',
  22.                   component: './executive'
  23.                 },
  24.               ]
  25.             }
  26.           ] 
  27.     }

3.2.2 动态菜单生成

  1. // 菜单递归函数
  2. const getMenuNode=(menus:Array<HomeMenuItem>)=>{
  3.     return menus.map((menu:HomeMenuItem)=>{
  4.         if(!menu.children){
  5.             return(
  6.                 <Menu.Item key={menu.id} style={{margin:0}}>
  7.                    <Link key={menu.id} to={menu.url}>{menu.name}</Link>
  8.                 </Menu.Item> 
  9.             )
  10.         }else{
  11.             return(
  12.                 <SubMenu key={menu.id} title={menu.name}>
  13.                     {
  14.                        getMenuNode(menu.children)
  15.                     }
  16.                 </SubMenu>
  17.             )
  18.         }
  19.     }) 
  20. }
  21. {/* Antd组件 */}
  22. <Sider collapsible collapsed={collapsed} onCollapse={()=>setCollapsed(!collapsed)}>
  23.     <Menu mode='inline'>
  24.     {getMenuNode(menus)}
  25.     </Menu>
  26. </Sider>

3.2.3 路由组件动态加载

点击react-router路由的Link会加载Route标签的组件，这个组件需要动态加载，根据react-router的官方推荐使用loadable-components(https://loadable-components.com/)组件动态加载，yarn add @loadable/component，因为使用Typescript因此需要添加类型支持 yarn add @types/loadable__component -D。

  1. //组件根据菜单描述动态加载
  3. const getPageComponent = (menus:Array<HomeMenuItem>)=>{
  4.   let array:Array<any>= new Array<any>()
  5.   for(let i=0;i<menus.length;i++){
  6.     if(!menus[i].children){
  7.       let T1 = loadable(()=>import(`${menus[i].component}`))
  8.       //react-router v6版本需要user/*这样的url来匹配子路由
  9.       let p = menus[i].url+"/*"
  10.       array.push(<Route key={menus[i].id} path={p} element={<T1/>}/>);
  11.   }else{
  12.     for(let j= 0;j<menus[i].children!.length;j++){
  13.       let T1 = loadable(()=>import(`${menus[i].children![j].component}`))
  14.       //react-router v6版本需要user/*这样的url来匹配子路由
  15.       let p = menus[i].children![j].url+"/*"
  16.       array.push(<Route key={menus[i].children![j].id} path={menus[i].children![j].url} element={<T1/>}/>);
  17.         }
  18.    }
  19.  }
  20.  return array       
  21. }
  22. //react-router v6 版本使用方法    
  23. <Routes>
  24.   <Route path="/" element={<HomeContentPage />}/>
  25.        {getPageComponent(menus)}
  26.   {/*
  27.   <Route path="/region" element={<RegionPage />}/>
  28.   <Route path="/executive" element={<ExecutivePage />}/> */}
  29. </Routes>