ant design pro v5 之 自定义面包屑数据

问题场景：?在项目中子页面通过点击面包屑返回父页面的时候，url后面拼接的参数丢失了，子页面是默认使用PageContainer包起来的

原因：在 Ant Design Pro 中，如果你使用 PageContainer 来管理页面，点击面包屑返回时默认是通过 history.goBack() 来实现的，这可能导致部分参数丢失。 一种解决方案是使用 history.replace() 而不是 history.goBack()，这样可以确保 URL 不会发生变化。你可以通过在点击面包屑时触发一个替代路由的事件来实现。这样可以保留 URL 的状态，但是页面内容会被替换

解决方案：自定义PageContainer组件的breadcrumd属性

示例代码如下：

import { history } from 'umi';
const { platform_id } = history?.location?.query || '';

const PageWithBreadcrumb = () => {
  const handleBreadcrumbClick = (item) => {
   const newPath = `${item.path}?platform_id=${platform_id || ''}`;
    history.replace(newPath);
  };

  return (
    <PageContainer
      breadcrumb={{
        routes: [
          { path: '/', breadcrumbName: 'Home' },
          { path: '/your-page', breadcrumbName: 'Your Page' },
        ],
        itemRender: (route, params, routes, paths) => {
          // Handle breadcrumb click
          const last = routes.indexOf(route) === routes.length - 1;
          return last ? (
            <span>{route.breadcrumbName}</span>
          ) : (
            <a onClick={() => handleBreadcrumbClick(route)}>{route.breadcrumbName}</a>
          );
        },
      }}
    >
      {/* Your page content */}
    </PageContainer>
  );
};

export default PageWithBreadcrumb;

关于breadcrumb这个属性，在我浏览pro-components官方api的时候没有直接写在文档中，他是封装了 antd 的 PageHeader 组件，官方也说了，源码也的确是这样，如果有疑惑可以看下antd的页头组件（PageHeader）和面包屑组件（Breadcrumb）即可，
?

谢谢点赞收藏~