Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
jia-niang opened this issue Apr 4, 2024 · 1 comment
Labels
💭 discussion we are discussing

Comments

@jia-niang
Copy link

jia-niang commented Apr 4, 2024

tdesign-react 版本

1.5.5

重现链接

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

重现步骤

组件 BreadcrumbItemrouterto 属性仅适用于 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@5to 属性建议改成仅允许传字符串(可以不考虑向前兼容,因为之前的对象用法一定会报错);

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

实际结果

No response

框架版本

无关

浏览器版本

无关

系统版本

无关

Node版本

无关

补充说明

No response

Copy link
Contributor

github-actions bot commented Apr 4, 2024

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

@HaixingOoO HaixingOoO added the 💭 discussion we are discussing label Apr 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
💭 discussion we are discussing
Projects
None yet
Development

No branches or pull requests

2 participants