使用反應路由器固定選項卡

Question

如何使用react-router爲我的某個頁面創建帶錨點的鏈接？

例如：我想是這樣的：mysite.com/#/nodes/10#instances

這將直接有人通過/nodes/:id處理的路線，然後選擇頁面上的標籤（標籤react-boostrap）對應於「實例」。

Answer 1

通常情況下，您會使用<Link />component，但不能爲所需的特定鏈接使用雙重散列。具有歷史路由的事件（其不使用哈希值作爲URL）這是not supported在react-router（參見最後一段）。

Answer 2

您可以實現哈希更改的偵聽器。這是一個本地javascript事件window.onhashchange（更多請參見hash change event MDN）

您可以將頂級組件包含所有選項卡作爲子組件，並只根據url的哈希值呈現特定選項卡。如果散列值發生變化，您可以更新狀態/道具以重新渲染並顯示新選項卡。