docs(breadcrumb): add with params demo (#49902)

* docs(breadcrumb): add with params demo

* test: add snap

components/breadcrumb/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -895,3 +895,35 @@ exports[`renders components/breadcrumb/demo/withIcon.tsx extend context correctl
 `;
 
 exports[`renders components/breadcrumb/demo/withIcon.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/breadcrumb/demo/withParams.tsx extend context correctly 1`] = `
+<nav
+  class="ant-breadcrumb"
+>
+  <ol>
+    <li>
+      <span
+        class="ant-breadcrumb-link"
+      >
+        Users
+      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
+    </li>
+    <li>
+      <a
+        class="ant-breadcrumb-link"
+        href=""
+      >
+        1
+      </a>
+    </li>
+  </ol>
+</nav>
+`;
+
+exports[`renders components/breadcrumb/demo/withParams.tsx extend context correctly 2`] = `[]`;

components/breadcrumb/__tests__/__snapshots__/demo.test.ts.snap

@@ -553,3 +553,33 @@ exports[`renders components/breadcrumb/demo/withIcon.tsx correctly 1`] = `
   </ol>
 </nav>
 `;
+
+exports[`renders components/breadcrumb/demo/withParams.tsx correctly 1`] = `
+<nav
+  class="ant-breadcrumb"
+>
+  <ol>
+    <li>
+      <span
+        class="ant-breadcrumb-link"
+      >
+        Users
+      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
+    </li>
+    <li>
+      <a
+        class="ant-breadcrumb-link"
+        href=""
+      >
+        1
+      </a>
+    </li>
+  </ol>
+</nav>
+`;

components/breadcrumb/demo/withParams.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+带有路由参数的。
+
+## en-US
+
+With route params.

components/breadcrumb/demo/withParams.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Breadcrumb } from 'antd';
+
+const App: React.FC = () => (
+  <Breadcrumb
+    items={[
+      {
+        title: 'Users',
+      },
+      {
+        title: ':id',
+        href: '',
+      },
+    ]}
+    params={{ id: 1 }}
+  />
+);
+
+export default App;

components/breadcrumb/index.en-US.md

@@ -36,6 +36,7 @@ return <Breadcrumb routes={[{ breadcrumbName: 'sample' }]} />;
 <!-- prettier-ignore -->
 <code src="./demo/basic.tsx">Basic Usage</code>
 <code src="./demo/withIcon.tsx">With an Icon</code>
+<code src="./demo/withParams.tsx">With Params</code>
 <code src="./demo/separator.tsx">Configuring the Separator</code>
 <code src="./demo/overlay.tsx">Bread crumbs with drop down menu</code>
 <code src="./demo/separator-component.tsx">Configuring the Separator Independently</code>

components/breadcrumb/index.zh-CN.md

@@ -37,6 +37,7 @@ return <Breadcrumb routes={[{ breadcrumbName: 'sample' }]} />;
 <!-- prettier-ignore -->
 <code src="./demo/basic.tsx">基本</code>
 <code src="./demo/withIcon.tsx">带有图标的</code>
+<code src="./demo/withParams.tsx">带有参数的</code>
 <code src="./demo/separator.tsx">分隔符</code>
 <code src="./demo/overlay.tsx">带下拉菜单的面包屑</code>
 <code src="./demo/separator-component.tsx">独立的分隔符</code>