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

2024-01-03 18:47:06

问题场景:?在项目中子页面通过点击面包屑返回父页面的时候,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)即可,
?

谢谢点赞收藏~

文章来源:https://blog.csdn.net/qq_40319394/article/details/135368946
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。