umi面包屑和页头配置和使用

在使用umi框架的时候,本来我们的页面是只能写在如图所示位置的内层红框中

通过审查元素可得,是由于框架自带的一个样式有margin导致了我们的内容正常情况是无法布局到外面去的(因为一般我们不会改框架自己写好的样式)

那么如果我们想要实现像这样的面包屑和页头要怎么办呢

umi自己封装了一个组件PageHeaderWrapper,使用起来也非常简单

import React from 'react';

import styles from './index.css';
import { PageHeaderWrapper } from '@ant-design/pro-layout';

export default function () {
  return (
    <PageHeaderWrapper title="任务审核">
      <div className={styles.normal}>
        <h1> 任务审核Page index</h1>
      </div>
    </PageHeaderWrapper>
  );
}

其中: title是页头的标题,就是截图的加粗的欢迎,其他参数请看下面截图

出现面包屑的条件:

1. 首先在路由的配置中要加上name属性
2. 这样的话默认是会在左边的导航栏中出现导航名
3. 如果你不想在左边出现的话在路由配置中要需要加一个属性hideInMenu,值为true
4. 像一级路由的话面包屑就是首页/一级页面的形式

{
  path: '/welcome',
  name: 'welcome',
  icon: 'smile',
  component: './Welcome', // Routes: ['./routes/PriviteRoute.js'],
},

5. 如果是二级路由则是首页/一级页面/二级页面的形式

{
  path: '/individual/main',
  name: 'individual',
  icon: 'crown',
  routes: [
    {
      path: '/individual/license/index',
      name: 'license',
      component: './individual/license',
    },
    {
      path: '/individual/seal/index',
      name: 'seal',
      component: './individual/seal',
    },
  ],
},

6. 这里又会发现一个问题,就是如果是二级路由的话第二个面包屑是不可点击的,而且每次最前面都是首页,如果讨厌这样的配置的话请往下看
7. 定位到src/layouts/BasicLayout.tsx这个文件可看到一个属性(位置请看截图行数)
   
   这里就是面包屑的渲染的配置,我们可打印routers(首页/任务管理/任务审核)
   
   比如说我们将前面的首页部分的面包屑删除,直接返回...routers,你就会发现3层面包屑变成了两层,首页/任务管理/任务审核 => 任务管理/任务审核,而且任务管理变成了可点击的,但是由于我这里任务管理不是一个有render的组件,所以无法进行跳转和渲染,如果想对面包屑做其它的配置可自己DIY.