ttk-app-core/src/apps/portal/app-root/app.js

@ttk/recat enterprise develop framework

import React, { useEffect } from 'react'
import { Router, RouterItem } from '@ttk/router'
import { useData } from '@ttk/app-loader'
import RouterView from '@/apps/portal/app-layout/components/RouterView'
import './style.less'

// Router可指定路由的根目录如root=‘/app-root’， path指定默认打开的链接
// routerItem的appName属性是必填属性，如果不指定path，将使用appName作为路由地址

export default React.memo(AppRuote)
function AppRuote(props) {
  const functionNav = useData([props, 'functionNav'])
  const iframeRoutes = useData([props, 'iframeRoutes'])
  // console.log('jjjjw', functionNav)
  // useEffect(() => {
  //   // renderRoutes(props, functionNav)
  // }, [functionNav])

  return (
    <div className="app-root">
      <Router {...props} root="/app-root" path='layout/home'>
        <RouterItem {...props} appName="app-login" />
        <RouterItem {...props} appName="app-registry" />
        <RouterItem {...props} appName="test-iframe" />
        <RouterItem {...props} appName="ttk-hook-app-init" />

        <RouterItem {...props} appName="app-layout" path="layout" meta={{ name: 'layout' }}>
          {/* <CheckLogin to="/app-root/app-login"> */}
          <RouterItem {...props} appName="app-registry" routerView={RouterView} meta={{ name: 'get registry', url: 'app-registry', menupath: ["app-layout"] }} />
          {/* <RouterItem {...props} appName="app-demo-table" routerView={RouterView} meta={{ name: 'table', url: 'app-demo-table' }} /> */}
          <RouterItem {...props} appName="app-demo-getstate" routerView={RouterView} meta={{ name: 'get state', url: 'app-demo-getstate', menupath: ["app-layout"] }} />
          <RouterItem {...props} appName="app-demo-update-title" routerView={RouterView} meta={{ name: 'update title', url: 'app-demo-update-title', menupath: ["app-layout"] }} />
          <RouterItem {...props} appName="router-example" path="router-example-params/:name/:age" routerView={RouterView} meta={{ name: 'router example', url: 'router-example-params', menupath: ["app-layout"] }} />
          <RouterItem {...props} appName="router-example" path="router-example-url" routerView={RouterView} meta={{ name: 'router example', url: 'router-example-url', menupath: ["app-layout"] }} />
          {/* </CheckLogin> */}
          {renderRoutes(props, functionNav.toJS())}
          {renderIframeRoutes(props, iframeRoutes.toJS())}
        </RouterItem>
        <RouterItem {...props} appName="app-layout" path="layout-vertical"  meta={{ name: 'layout', layout: "vertical" }}>
          <RouterItem {...props} appName="app-demo-update-title" routerView={RouterView} meta={{ name: 'update title', url: 'app-demo-update-title' }} />
        </RouterItem>
        <RouterItem {...props} appName="app-layout" path="layout-horizontal" meta={{ name: 'layout', withTabbar: false, layout: "horizontal"  }}>
          <RouterItem {...props} appName="app-demo-update-title" routerView={RouterView} meta={{ name: 'update title', url: 'app-demo-update-title' }} />
        </RouterItem>
      </Router>
    </div>
  )
}

function renderIframeRoutes(props, routes) {
  return routes.map((item) => {
    return <RouterItem {...props} key={item.url} path={item.url} appName="app-iframe" routerView={RouterView} meta={{ ...item }} />
  })
}

function renderRoutes(props, routes) {
  if (Array.isArray(routes)) {
    const result = routes.map((route, index) => {
      return renderRoute(props, route)
    })
    return result
  } else {
    return null
  }
}
// functionType: "desk" 首页
function renderRoute(props, route) {
  if (route.subNodeFlag === '0') {
    // 没有子级
    return (<RouterItem key={route.functioinId} meta={route}  {...props} {...route} appName={route.url} routerView={RouterView} />)
  } else {
    // 还有子级
    return renderRoutes(props, route.childSecFunctioinDTOs)
  }
}