使用React路由器锚定选项卡

时间:2015-12-02 19:23:36

标签: reactjs react-router react-bootstrap

如何使用react-router为我的某个网页创建包含锚点的链接?

示例:我想要的内容如下: mysite.com /#/ nodes / 10#instances

这会将某人引导至/nodes/:id处理的路线,然后在该页面上选择与“实例”对应的标签(react-boostrap标签)。

2 个答案:

答案 0 :(得分:2)

您可以实现哈希更改的侦听器。这是原生javascript事件aenter(有关详情,请参阅此hash change event MDN

您可以将顶级组件包含所有选项卡作为子组件,然后根据网址的哈希值呈现特定选项卡。如果散列更改,您可以更新state / props以重新渲染并显示新选项卡。

答案 1 :(得分:1)

通常您会使用<Link /> component,但不能对所需的特定链接使用双重哈希。具有历史路由的事件(不使用URL的哈希)这在react-router中是not supported(参见最后一段)。