@umijs/plugin-layout layout 参数失效

[ouzhou]

尝试使用layout，但是登录页面这样的，不应该嵌入到antdpro-layout里面

import { IBestAFSRoute } from '@umijs/plugin-layout';

const routes: IBestAFSRoute[] = [
  {
    path: '/',
    redirect: '/dashboard/analysis',
  },

  {
    name: 'login',
    path: '/login',
    component: '@/pages/login',
    menu: false,
    layout: {
      hideMenu: true,
      hideNav: true,
      hideFooter: true,
    },
  },

  {
    name: 'dashboard',
    path: '/dashboard',
    menu: { name: '仪表板', icon: 'Dashboard' },
    routes: [
      {
        name: 'analysis',
        path: 'analysis',
        component: '@/pages/dashboard/analysis',
        menu: { name: '分析页', icon: 'Audit' },
      },
    ],
  },
];

export default routes;

事实上无法使用 login页面无法脱离出整个layout menu: false设置了无效 只有当且仅当

    path: '/login',
    component: '@/pages/login',
    menu: false,
    layout: {
      hideMenu: true,
      hideNav: true,
      hideFooter: true,
    },

    path: '/login',
    component: '@/pages/login',
    menu:  { name: 'login', icon: 'Dashboard' },
    layout: {
      hideMenu: true,
      hideNav: true,
      hideFooter: true,
    },

只有menu非false 下面的layout的hade参数才会生效

[ouzhou]

@umijs/plugin-layout 这个能有demo吗，文档过于简单，感觉不是特别友好，umi next-app这个仓库5个月没有更新了，能跑起来的代码案例对新手入门真的很重要

[leftstick]

要不要试试这个generator-umi，没有用@umijs/plugin-layout ，但内置了类似功能

[ouzhou]

 */
export interface IBestAFSRoute extends IRoute {
  /** 权限：https://yuque.antfin-inc.com/bigfish/best_afs/nxuhgb */
  access?: string;

  /** 当前页面的面包屑是否隐藏 */
  showBreadcrumb?: boolean;

  /** 默认为 false，在菜单中隐藏此项包括子项 */
  menu?: false | IRouteMenuConfig;

  /** 默认为 true ，是否显示 Layout */
  layout?: boolean | IRouteLayoutConfig;
}

这是我万万没有想到的

蜜汁操作 这样写就行

  {
    path: '/login',
    component: '@/pages/login',
    // menu: false,
    layout: false,
  },

千万不要写menu: false, 写了就包含在里面了， 文档里面没说还有这样的操作

[LeoWang1991]

@ouzhou 请教个问题 我在配置项.umirc打开 layout: {}， 路由里面想要使用模板配置如下：

export default [
  {
    path: '/',   
    component: '@/layouts/index.tsx',   
    // name: 'xiafei',    
    routes: [
      {
        name: '首页',
        path: '/home',
        component: '@/pages/home'
      }
    ]
  }
]

layout/index.tsx如下

import styles from './index.less'

const BasicLayout = props => {
  console.log(props)
  return (
    <div className={styles.rightContent}>
      <Card>
        {props.children}
      </Card>
    </div>
  )
}

export default BasicLayout

就是想使用一些公共模板，但是好像这样 没法渲染到左侧菜单，把上面name: '' 配置了，就是个二级菜单。

就是想如下这么使用：

[big-camel]

另外还可以给路由设置单独母版页 类似这样

// preview
    {
        path: '/preview',
        component: '../layouts/BlankLayout',
        routes: [
            {
                path: '/preview',
                name: 'preview.page',
                component: './preview',
            },
        ],
    },

plugin-layout 使用的组件 https://procomponents.ant.design/components/layout#api 这里有更详细的说明