Reactjs 带有react路由器的面包屑中的友好名称

Reactjs 带有react路由器的面包屑中的友好名称,reactjs,react-router,material-ui,react-router-dom,breadcrumbs,Reactjs,React Router,Material Ui,React Router Dom,Breadcrumbs,我的react应用程序使用react路由器dom(v5.1.2)。我在我的UI中添加了一个breadcrumb,它解析路由器位置以提供返回到更高UI级别的链接 面包屑组件如下所示(省略了react/materialui的一些样板): 我真正想做的是保持路径URL不变,但在面包屑中显示用户名,甚至可能是路径组件的本地化名称。理想情况下,最终得到的面包屑更友好,如下所示: Home / Users / Bob Smith / Name / Pet 由于react路由器不使用中央路由表(这有其优点)

我的react应用程序使用react路由器dom(v5.1.2)。我在我的UI中添加了一个breadcrumb,它解析路由器位置以提供返回到更高UI级别的链接

面包屑组件如下所示(省略了react/materialui的一些样板):

我真正想做的是保持路径URL不变,但在面包屑中显示用户名,甚至可能是路径组件的本地化名称。理想情况下,最终得到的面包屑更友好,如下所示:

Home / Users / Bob Smith / Name / Pet
由于react路由器不使用中央路由表(这有其优点),所以我不认为有一种简单的方法可以干净地做到这一点。理想情况下,我指定
to=''
的任何地方都可以有一个友好的名字
name='Bob Smith'
?路由器的位置将保存这些元数据,用于创建面包屑

我可以看到很多方法来做到这一点,但我希望我只是过于密集,错过了创作者在我投入其中并做一些不同的事情之前想要的明显的技术


有什么建议吗?

您能为您的问题添加一些代码吗?无法猜测对象的结构。添加了面包屑栏的代码,以显示我如何从react router提取面包屑组件。
home / users / 5ecf40ed29f0e13e93e00d2a / name / dog
Home / Users / Bob Smith / Name / Pet