在React Router中链接到自己比赛的确切路径

时间:2019-04-24 16:19:24

标签: javascript reactjs react-router

我有一些使用react-router-dom版本4.2.2的嵌套路由,并且我想在根路由上提供一个“后退”按钮。例如,如果我的层次结构是

  • /base/:id:表示资源的索引页,链接并有条件地呈现内部活动
    • /base/:id/some-inner-activity:代表一个内部活动的页面
    • /base/:id/some-other-inner-activity:代表另一个内部活动的页面

我希望能够提供由基本组件呈现的链接,该链接只会使您回到/base/:id,因此所有活动都可以具有共享的“后退”或“向上”行为。我可以使用/base/${match.params.id}来做到这一点,但这意味着我必须在基本组件中对/base/进行硬编码,因此,如果我要更改其所在的路线,则会有很多断开的链接

我希望能够将match.pathmatch.params一起使用,但是我不确定如何以React Router认可的方式进行此操作,我当然不会不想自己实现。

我整理了一个代码沙箱,展示了我的首选行为,但是您会注意到,在Base组件中,我仍然必须对/base/字符串进行硬编码以生成后退按钮URL。

https://codesandbox.io/embed/n5r30r2qmm

2 个答案:

答案 0 :(得分:0)

反应路由器提供generatePath,可以称为generatePath(match.path, match.params)

请注意,这不适用于TypeScript,因此您可能必须执行generatePath(match.path, match.params as {[paramName: string]: string;})或类似的操作。

答案 1 :(得分:0)

您可以尝试引用props.params.whateveridyouwant

另一种方法是将match.params推送到redux存储,以便您可以在应用程序中的任何位置访问它。

希望这会有所帮助!或者引导您朝正确的方向前进!