动态面包屑导航实现说明

功能介绍

本项目实现了动态修改页面面包屑名称的功能，特别适用于新增和修改页面共用一个组件的场景。通过 dva 状态管理，可以在具体页面中动态设置面包屑导航的最后一级显示文本。

实现原理

1. 通过 breadcrumb 模型管理面包屑状态
2. 使用 connect 将 breadcrumb 状态连接到布局组件
3. 在页面组件中根据不同条件（如是否有 id 参数）来动态设置面包屑名称

代码结构

• src/models/breadcrumb.ts - 面包屑状态模型
• src/layouts/BasicLayout.tsx - 支持动态面包屑的布局组件

使用示例

实际项目中的使用方式 (supplierAnnualTemplateManageAdd.tsx)

import React, { useEffect } from 'react';
import { useIntl, connect } from 'umi';
import type { Dispatch } from 'umi';
import type { BreadcrumbState } from '@/models/breadcrumb';

// 组件 props 接口定义
interface PageProps extends ConnectProps {
  breadcrumb: BreadcrumbState; // dva model状态
  dispatch: Dispatch; // dva dispatch方法
}

const YourPage: React.FC<PageProps> = ({ dispatch }) => {
  const intl = useIntl();
  const location = useLocation();
  
  // 设置面包屑名称
  useEffect(() => {
    if (location.state?.editData?.id && dispatch) {
      // 编辑模式，设置编辑相关的面包屑
      dispatch({
        type: 'breadcrumb/updateBreadcrumbName',
        payload: intl.formatMessage({ id: "yourNamespace.add.edit" }),
      });
    } else {
      // 新增模式，设置新增相关的面包屑
      dispatch({
        type: 'breadcrumb/updateBreadcrumbName',
        payload: intl.formatMessage({ id: "yourNamespace.add.title" }),
      });
    }

    // 组件卸载时重置面包屑
    return () => {
      dispatch({
        type: 'breadcrumb/resetBreadcrumb',
      });
    };
  }, [dispatch, intl, location]);
  
  // 页面其他内容...
  return (
    <div>
      {/* 页面内容... */}
    </div>
  );
};

// 将dva model中的状态映射到组件props
export default connect(({ breadcrumb }: { breadcrumb: BreadcrumbState }) => ({
  breadcrumb,
}))(YourPage);

关键实现点

1. 在页面组件中通过 connect 连接到 dva 状态：

// 将dva model中的状态映射到组件props
export default connect(({ breadcrumb }: { breadcrumb: BreadcrumbState }) => ({
  breadcrumb,
}))(YourPage);

2. 在 useEffect 中动态设置面包屑名称：

useEffect(() => {
  // 根据条件设置不同的面包屑名称
  if (location.state?.editData?.id) {
    dispatch({
      type: 'breadcrumb/updateBreadcrumbName',
      payload: intl.formatMessage({ id: "yourNamespace.add.edit" }),
    });
  } else {
    dispatch({
      type: 'breadcrumb/updateBreadcrumbName',
      payload: intl.formatMessage({ id: "yourNamespace.add.title" }),
    });
  }

  // 组件卸载时重置面包屑
  return () => {
    dispatch({
      type: 'breadcrumb/resetBreadcrumb',
    });
  };
}, [dispatch, intl, location]);

注意事项

1. payload 必须是字符串：传递给 updateBreadcrumbName action 的 payload 必须是字符串类型，不能是对象或 React 组件

   • 正确：payload: intl.formatMessage({ id: "menu.edit" })
   • 错误：payload: { breadcrumbName: <FormattedMessage id="menu.edit" /> }

2. 重置面包屑：确保在组件卸载时调用 resetBreadcrumb 以重置面包屑状态

3. 国际化处理：使用 intl.formatMessage() 方法处理国际化文本，不要在 payload 中直接使用 FormattedMessage 组件

4. 依赖项管理：确保 useEffect 的依赖项包含 dispatch, intl 和用于条件判断的变量（如 location）