PageHeader

页面级别的组件，集成到布局中，也可以做成一个应用级别的组件，包含

• 页面标题
• 面包屑导航
• 页面通用操作

PageHeader 作为页面级别的组件，每个页面可以单独引用，然后传入数据

<BasicLayout>
  <AppHeader title="Page A" />
  // code
</BasicLayout>

应用级组件

PageHeader 作为应用级别的组件，数据要从 routerConfig里面获取，直接集成到布局中

• 纯展示型组件
• 一旦接收到的 props 发生变化，PageHeader组件就需要进行一次重绘

  <BasicLayout />

从应用数据流的角度来

• 应用页眉应该是向不同的页面去传递数据的，而不是反过来去接收来自页面的数据
• PageHead组件与页面路由之间是有着严格的一一对应的关系
• 优化：将 PageHeader的配置，做到路由配置中，从 routerConfig里面渲染
• 对所有的应用级配置项，做统一的配置处理

应用级的 GlobalHeader + PageHeader

PageHeader

import Breadcrumbs from './Breadcrumbs';
function PageHeader(props) {
  const { route: { title }, intl } = props;
  if (!title) {
    return null;
  }
  const pageTitle = intl.formatMessage({ id: pageTitle });
  return (
    <section className="page-header">
      <h1 className="page-title">{pageTitle}</h1>
      <Breadcrumbs />
    </section>
  );
}

routes

根据当前页面的 pathname，
使用 react-router-config 提供的 matchRoutes 方法，来获取当前页面 route 对象的所有配置项

import { matchRoutes } from 'react-router-config';
const routes = [
  {
    path: '/outlets',
    exact: true,
    permissions: ['admin', 'user'],
    component: Outlets,
    unauthorized: Unauthorized,
    title: '门店管理',
    breadcrumb: [
      // name 多语言的 key
      {path: '/outlets', name: 'outlets'}
    ],
  },
  {
    path: '/outlets/:id',
    exact: true,
    permissions: ['admin', 'user'],
    component: OutletDetail,
    unauthorized: Unauthorized,
    title: '门店详情',
    breadcrumb: [
      {path: '/outlets', name: 'outlets', title: '门店管理'},
      {path: '/outlets/:id', name: 'outletsDetail', title: '门店详情'}
    ],
  }
];
// matchRoutes(routes, pathname)，返回一个路由对象
{
  path: '/outlets/:id',
  exact: true,
  permissions: ['admin', 'user'],
  component: OutletDetail,
  unauthorized: Unauthorized,
  title: '门店详情',
  breadcrumb: [
    {path: '/outlets', name: 'outlets', title: '门店管理'},
    {path: '/outlets/:id', name: 'outletsDetail', title: '门店详情'}
  ],
}