React Router：基於哈希的 NavLink

Question

我正在嘗試創建一個導航欄，使用 React Router 的NavLink組件根據頁面的哈希值顯示活動鏈接。 這是我所擁有的：

<NavLink to="#home">Home</NavLink>
<NavLink to="#about">About</NavLink>

無論散列是什么，這兩個鏈接都具有active類。 如何根據當前哈希使鏈接顯示為活動狀態？

Answer 1

您可以執行以下操作：

<NavLink
  to='/#contact'
  isActive={() => {
    return window.location.hash === '#contact';
  }}>
  Contact
</NavLink>

isActive : 功能

添加用於確定鏈接是否處於活動狀態的額外邏輯的函數。 如果您想要做的不僅僅是驗證鏈接的路徑名是否與當前 URL 的路徑名匹配，則應該使用它。