🧐[问题]ProLayout配合PageContainer实现的自定义面包屑如何完全控制链接

[wldos]

🧐 问题描述

要通过如标题所述的自定义面包屑，链接不是常规路由，设置这种路由无关的链接有更优雅的方式吗？

这是一个产品详情页，要求展示的面包屑是产品的各级分类，点击分类进入分类归档列表页，目前用了比较low的方式实现了：

return (
    <PageContainer
      title={false}
      header={{
        breadcrumb: {
          itemRender: (route, params, routes) => {
            const idx = routes.indexOf(route);
            if (idx === routes.length - 1)
              return <span>{route.breadcrumbName}</span>
            if (idx === 0)
              return <a href='/'>{route.breadcrumbName}</a>
           //  中间的面包屑每一层代表一个产品类别，点击进入产品类别存档列表（问题：如果加 href属性或者Link组件框架自动追加当前pathname）
            return <a onClick={() => {window.location.href=`/product/${route.path}`}}>{route.breadcrumbName}</a>
          },
          routes: crumb,
        },
      }}>
      <GridContent>
        {rowBody}
      </GridContent>
    </PageContainer>
  );
};

[chenshuai2144]

现在没有很好的办法，你这个代码倒是没啥问题。 不过你可以写在全局，这样不用每个页面写一次

[wldos]

可行，在ProLayout布局组件中设置了全局自定义面包屑：

breadcrumbRender={() => [
  { // 自定义全局面包屑的数据
    path: '/',
    breadcrumbName: formatMessage({
      id: 'menu.home',
    }),
  },
  ...seo.crumbs, // 在children页面设置动态面包屑
]}
/* eslint-disable-next-line no-unused-vars */
itemRender={(route, params, routes, paths) => {
  const last = routes.indexOf(route) === routes.length - 1;
  return last ? (
    <span>{route.breadcrumbName}</span>
  ) : (
    <Link to={route.path}>{route.breadcrumbName}</Link>
  );
}}

[marlti7]

可行，在ProLayout布局组件中设置了全局自定义面包屑：

breadcrumbRender={() => [
  { // 自定义全局面包屑的数据
    path: '/',
    breadcrumbName: formatMessage({
      id: 'menu.home',
    }),
  },
  ...seo.crumbs, // 在children页面设置动态面包屑
]}
/* eslint-disable-next-line no-unused-vars */
itemRender={(route, params, routes, paths) => {
  const last = routes.indexOf(route) === routes.length - 1;
  return last ? (
    <span>{route.breadcrumbName}</span>
  ) : (
    <Link to={route.path}>{route.breadcrumbName}</Link>
  );
}}

seo是啥

[yaya1286249672]

请问crumb是什么呀