dva+antd+ts的路由菜单布局

小鱼儿 2022-12-02 01:09 240阅读 0赞

rfce（rcc）快速创建例子

## 1.路由配置 ##

**routes/config.ts**

import React from 'react'
    import {  HomeOutlined, OrderedListOutlined, NotificationOutlined } from '@ant-design/icons';
    export interface route{ 
      title?: string
      pathname: string
      component: any
      isTop: boolean
    }
    const routes = [
      { 
        title: 'Dashboard',
        pathname: '/dashboard',
        icon: HomeOutlined,
        component: React.lazy(() => import('../views/dashboard')),
      },
      { 
        title: '欢迎',
        pathname: '/helloworld',
        icon:HomeOutlined,
        component: React.lazy(() => import('../views/helloworld')),
        isTop:true
      },
      { 
        title: '罐管理',
        pathname: '/tankmanage',
        icon:OrderedListOutlined,
        component: React.lazy(() => import('../views/TankManage')),
        isTop:true
      },
      
      { 
        title: '404',
        pathname: '/404',
        component: React.lazy(() => import('../views/404')),
        
      },
      { 
        title: '/',
        pathname: '/',
        component: React.lazy(() => import('../views/helloworld')),
        
      }
    ]
    
    export default routes

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk4MTkx_size_16_color_FFFFFF_t_70_pic_center]  
**/routes/createRoutes.tsx**

import React, {  Suspense } from 'react'
    import {  Router, Route, Switch, Redirect, RouteComponentProps, RouteProps } from 'dva/router'
    import routes, {  route} from './config'
    import BaseLayout from '../components/layout/BaseLayout'
    import {  Console } from 'console'
    const NoMatch: React.FC<RouteComponentProps> = (props: RouteComponentProps) => { 
      return (
        <div>
          404..
        </div>
      )
    }
    
    const CreateRoutes: React.FC<RouteComponentProps> = ({  history }: RouteComponentProps) => { 
      const generateRoute: React.FC<route> = ({ 
        pathname,
        component: Component
      }: RouteProps & route) => (
          <Route
            key={ pathname}
            path={ pathname}
            exact
            component={ (props: RouteProps) => (
              <Suspense fallback={ <div />}>
                <Component { ...props} />
              </Suspense>
            )}
          />
        )
    
      return (
        <Router>
          '基础布局
          <BaseLayout>
            <Switch>
              { routes.map(({  pathname, component }: route) => generateRoute({  pathname, component }))}
              <Redirect to='/404'></Redirect>
            </Switch>
          </BaseLayout>
        </Router>
      )
    }
    
    export default CreateRoutes

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk4MTkx_size_16_color_FFFFFF_t_70_pic_center 1]

## 2.引入布局 ##

**/layout/BaseLayout**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk4MTkx_size_16_color_FFFFFF_t_70_pic_center 2]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk4MTkx_size_16_color_FFFFFF_t_70_pic_center 3]  
**加上this.props.children**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk4MTkx_size_16_color_FFFFFF_t_70_pic_center 4]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk4MTkx_size_16_color_FFFFFF_t_70_pic_center 5]

## 3.react-loadable路由懒加载 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk4MTkx_size_16_color_FFFFFF_t_70_pic_center 6]

## 4.给菜单加上链接 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk4MTkx_size_16_color_FFFFFF_t_70_pic_center 7]  
**遍历动态渲染Menu**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk4MTkx_size_16_color_FFFFFF_t_70_pic_center 8]  
**push**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk4MTkx_size_16_color_FFFFFF_t_70_pic_center 9]  
**别忘了加上@withRouter**

**原教程：https://www.bilibili.com/video/BV1CE411c7i9?p=12**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk4MTkx_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/482aa6e318ff413c8576fe6faf0c8733.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk4MTkx_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/e0d3915e347d4080b3d3c3c68db3c537.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk4MTkx_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/39ac55542af7459baf81b89e71d07fbc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk4MTkx_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/8cb02d45418f44399c3d63e5acd898c1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk4MTkx_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/5451c7179ef948478f84b7a37b103180.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk4MTkx_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/63f4d136f05c48adb1e1e2027be29e9e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk4MTkx_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221123/f8e669f23ed84232ba92e9fdbb35ea28.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk4MTkx_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221123/4599527263124c1cb9b94870ac785ad2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk4MTkx_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221123/5f3f5c52738a4fe0b1769cc416b1d301.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk4MTkx_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221123/392364c65cd44138b6c4abbcceffec5f.png