fix: breadcrumbRender update

src/BasicLayout.tsx

@@ -158,37 +158,15 @@ const ProLayout = defineComponent({
       }
       return <Header {...p} matchMenuKeys={matchMenuKeys || []} />;
     };
+    const breadcrumb = computed(() => ({
+      ...props.breadcrumb,
+      itemRender: getPropsSlotfn(slots, props, 'breadcrumbRender'),
+    }));
 
-    // const restProps = computed(() =>
-    //   omit(props, []),
-    // );
-    // provide('route-context', routeContext);
-    // const routeContext = reactive({
-    //   getPrefixCls,
-    //   // ...props,
-    //   locale: refProps.locale.value || defaultRouteContext.locale,
-    //   breadcrumb: computed(() => {
-    //     return {
-    //       ...props.breadcrumb,
-    //       itemRender: breadcrumbRender,
-    //     };
-    //   }),
-    //   contentWidth: refProps.contentWidth, // 'Fluid',
-    //   layout: refProps.layout,
-    //   navTheme: refProps.navTheme,
-    //   splitMenus: refProps.splitMenus,
-    //   fixedHeader: refProps.fixSiderbar,
-    //   fixSiderbar: refProps.fixSiderbar,
-    //   sideWidth: siderWidth,
-    //   headerHeight: refProps.headerHeight,
-    //   hasFooterToolbar: false,
-    //   menuData: refProps.menuData,
-    //   selectedKeys: refProps.selectedKeys,
-    //   openKeys: refProps.openKeys,
-    // });
     const routeContext = reactive<RouteContextProps>({
       ...defaultRouteContext,
       ...(omit(toRefs(props), ['onCollapse', 'onOpenKeys', 'onSelect', 'onMenuClick']) as any),
+      breadcrumb: breadcrumb,
     });
     provideRouteContext(routeContext);
     return () => {
@@ -212,7 +190,6 @@ const ProLayout = defineComponent({
       const customHeaderRender = getPropsSlot(slots, props, 'headerRender');
       const menuHeaderRender = getPropsSlot(slots, props, 'menuHeaderRender');
       const footerRender = getPropsSlot(slots, props, 'footerRender');
-      const breadcrumbRender = getPropsSlotfn(slots, props, 'breadcrumbRender');
       // menu render
       const menuItemRender = getPropsSlotfn(slots, props, 'menuItemRender');
       const subMenuItemRender = getPropsSlotfn(slots, props, 'subMenuItemRender');

src/PageContainer/index.tsx

@@ -135,14 +135,8 @@ const renderFooter = (
     'title'
   >,
 ): VNodeChild | JSX.Element => {
-  const {
-    tabList,
-    tabActiveKey,
-    onTabChange,
-    tabBarExtraContent,
-    tabProps,
-    prefixedClassName,
-  } = props;
+  const { tabList, tabActiveKey, onTabChange, tabBarExtraContent, tabProps, prefixedClassName } =
+    props;
   if (tabList && tabList.length) {
     return (
       <Tabs
@@ -195,7 +189,7 @@ const renderPageHeader = (
 
 const defaultPageHeaderRender = (
   props: PageContainerProps,
-  value: RouteContextProps & { prefixedClassName: string },
+  value: Required<RouteContextProps> & { prefixedClassName: string },
 ): VNodeChild | JSX.Element => {
   const {
     title,
@@ -214,10 +208,11 @@ const defaultPageHeaderRender = (
   if (!title && title !== false) {
     pageHeaderTitle = value.title;
   }
-
+  console.info('value.breadcrumb', value.breadcrumb);
   const breadcrumb = restProps.breadcrumb || {
-    routes: value.breadcrumb?.routes,
-    itemRender: value.breadcrumb?.itemRender,
+    ...(value.breadcrumb || {}),
+    routes: unref(value.breadcrumb?.routes),
+    itemRender: unref(value.breadcrumb?.itemRender),
   };
   // inject value
   return (
@@ -259,7 +254,7 @@ const PageContainer = defineComponent({
       const headerContent = getPropsSlot(slots, props, 'content');
       const extra = getPropsSlot(slots, props, 'extra');
       const extraContent = getPropsSlot(slots, props, 'extraContent');
-
+      console.info('value', value);
       return (
         <div class={`${prefixedClassName.value}-warp`}>
           {defaultPageHeaderRender(
@@ -270,11 +265,12 @@ const PageContainer = defineComponent({
               extra,
               extraContent,
             },
-            {
-              ...value,
-              prefixCls: undefined,
-              prefixedClassName: prefixedClassName.value,
-            },
+            value,
+            // {
+            //   ...value,
+            //   prefixCls: undefined,
+            //   prefixedClassName: prefixedClassName.value,
+            // },
           )}
         </div>
       );

yarn.lock

@@ -2519,16 +2519,11 @@ object.values@^1.1.3:
     define-properties "^1.1.3"
     es-abstract "^1.18.2"
 
-omit.js@^2.0.0:
+omit.js@^2.0.0, omit.js@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/omit.js/-/omit.js-2.0.2.tgz#dd9b8436fab947a5f3ff214cb2538631e313ec2f"
   integrity sha512-hJmu9D+bNB40YpL9jYebQl4lsTW6yEHRTroJzNLqQJYHm7c+NQnJGfZmIWh8S3q3KoaxV1aLhV6B3+0N0/kyJg==
 
-omit.js@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.npm.taobao.org/omit.js/download/omit.js-2.0.2.tgz#dd9b8436fab947a5f3ff214cb2538631e313ec2f"
-  integrity sha1-3ZuENvq5R6Xz/yFMslOGMeMT7C8=
-
 once@^1.3.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"