[Breadcrumb] 组件 BreadcrumbItem 的 router 和 to 属性不适用于 React

[jia-niang]

tdesign-react 版本

1.5.5

重现链接

https://codesandbox.io/p/sandbox/tdesign-react-breadcrumb-router-v6-krkvtm

重现步骤

组件 BreadcrumbItem 的 router 和 to 属性仅适用于 Vue，而且 to 的格式完全是按照 Vue Router 的格式来的（文档）。 实际上这两个属性在 React 中很难用得上，毕竟 React 没有类似于 “Router 对象” 这种东西；就算 Next.js 里的 useRouter() 也和这个组件不兼容。

参考 Demo：https://codesandbox.io/p/sandbox/tdesign-react-breadcrumb-router-v5-vgc6tt react-router-dom 的 v5 版本，可以使用 useHistory() 获取一个对象（文档），它可以作为 router 参数传，它有 .push(path, [state]) 方法和 .replace(path, [state]) 方法，正好可以兼容此组件，但此时 to 属性也只能支持字符串了。

参考 Demo：https://codesandbox.io/p/sandbox/tdesign-react-breadcrumb-router-v6-krkvtm react-router-dom 的 v6 版本开始，删去了 useHistory()，而使用 createBrowserRouter() 时会返回一个对象，这个对象确实可以被看作是 “Router 对象”，但它的 API 又完全不一样了：.navigate(path) 等同于组件源码里的 .push(path)，而 .navigate(path, { replace: true }) 等同组件源码里的 .replace(path)。

期望结果

如果想兼容 react-router-dom@5，to 属性建议改成仅允许传字符串（可以不考虑向前兼容，因为之前的对象用法一定会报错）；

如果想兼容 react-router-dom@6，源码里的 .push() 和 .replace() 需要按照上面的 API 格式改成 .navigate(...) 的写法，为了兼容性，可能还需要加个判断条件 if(router.navigate)，此时 to 属性也建议只允许字符串。

实际结果

No response

框架版本

无关

浏览器版本

无关

系统版本

无关

Node版本

无关

补充说明

No response

[github-actions[bot]]

👋 @jia-niang，感谢给 TDesign 提出了 issue。 请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。