react-router基于当前路由的链接

时间:2016-03-15 23:36:27

标签: javascript react-router flux

我有以下路径配置,其中有一个组件ShowObj,其中有多个选项卡显示对象的不同方面。

<Route path={“/obj/:id"} component={ShowObj}>
    <Route path={“tab1”} component={Tab1} />
    <Route path={“tab2”} component={Tab2} />
    <IndexRoute component={Tab1} />
</Route>

在顶部,在我的ShowObj组件中,我想渲染按钮以转到下一个/ prev obj。这样做时我想保留当前选项卡而不是默认选项卡。也就是说,如果我目前在tab2中的obj XXX上(路径&#34; / obj / XXX / tab2&#34;)并且我转到对象YYY,我想留在同一个标​​签上(路径&#34; / OBJ / YYY / TAB2&#34;。)

由于路由器已经在进行选择,我希望有一种方法可以在我的ShowObj中以某种方式知道确实选择了哪个选项卡。我尝试在路线中添加道具,如:

<Route path={“tab1”} component={Tab1} currentTab="tab1"/>

但它似乎只在Tab1中可用,而不是在ShowObj中。

我能想到的两个解决方案:

  1. 更改我的路线以使标签也成为参数
  2. 使用路由器转换挂钩设置当前所在选项卡的(全局)状态,并在呈现(或单击)这些按钮时使用该状态。
  3. 有没有更简单的方法?我错过了什么吗?

1 个答案:

答案 0 :(得分:0)

我建议你从redux-react-router,mobx-react-router或提供当前路由器的类似库中获取当前位置。或者你可以将当前位置传递到上下文并从那里获取