zoukankan      html  css  js  c++  java
  • react

    routerCofing配置

    
      {
        path: '/route1/someModel',
        children: [
          {
            path: '/route2',
            component: RouteBase.Cps1,
            children: [
              {
                path: '/route3',
                component: RouteBase.Cps2,
                children: [
                  {
                    path: '/route4',
                    component: RouteBase.Cps3,
                  },
                ]
              },
            ]
          },
          {
            path: '/route5', // 退货
            component: RouteBase.Cps4
          }
        ]
      },
    
    

    router - index

      // 返回路由
      const RouteItem = props => {
        const { redirect, path, component, key } = props
        if (redirect) {
          return <Redirect exact key={key} from={path} to={redirect} />
        }
        return <Route exact key={key} component={component} path={path} />
      }
    
      // eslint-disable-next-line no-array-constructor
      let Routes: any = new Array()
    
      // 获取子路由
    
      const loopRoute = (route, i, pre_path?: string) => {
        return route.children.forEach((routeChild, idx) => {
        let __path = pre_path + routeChild.path
          const { redirect, component, children } = routeChild
          if (children && children.length) {
            // 递归获取子路径
            if (component) {
              Routes = Routes.flat()
              Routes.push(RouteItem({
                key: `${i}-${idx}`,
                redirect,
                path: __path,
                component: component
              }))
            }
            loopRoute(routeChild, idx, __path)
          } else {
            Routes.push( RouteItem({
              key: `${i}-${idx}`,
              redirect,
              path: __path,
              component: component
            }))
          }
        })
      }
    
      routes.forEach((route: any, key) => {
        return Array.isArray(route.children) && route.children.length
          ?  loopRoute(route, key, route.path)
          :  Routes.push(RouteItem({ key, ...route }))
      })
    
    // 使用
    
    <Switch>
      <Route exact path='/login' component={Login} />
      {Routes}
    </Switch>
    
  • 相关阅读:
    mysql服务器上的mysql这个实例中表的介绍
    mysql的innodb存储引擎和myisam存储引擎的区别
    Ubuntu配置java环境变量
    Android_adb shell am/pm使用
    tty相关内容
    Ubuntu和windows共享文件夹
    蓝牙查询网站
    Vim折叠模式设置
    ubuntu下安装jdk
    Linux下Gcc生成和使用静态库和动态库详解
  • 原文地址:https://www.cnblogs.com/mapleChain/p/12632719.html
Copyright © 2011-2022 走看看