已解決：activeClassName 反應路由器

React Router 中與 activeClassName 相關的主要問題是它不會在路由發生變化時自動更新活動類。 這意味著開發人員必須在路由更改時手動更新活動類，這既耗時又容易出錯。 此外，如果多個路由相互嵌套，則很難跟踪當前處於活動狀態的路由以及應將哪些類應用到每個元素。

<Router>
  <Link to="/about" activeClassName="active">About</Link>
</Router>

1。 “ 組件用於在 React 中創建一個路由器，允許用戶在不同頁面之間導航。

2。 “ 組件用於創建一個鏈接，單擊該鏈接會將用戶帶到“to”屬性中指定的頁面（在本例中為“/about”）。

3. activeClassName 屬性指定當鏈接處於活動狀態（在本例中為“活動”）時應應用的類。

什麼是 NavLink

NavLink 是 React Router 中使用的 React 組件，用於在應用程序中的不同路由之間創建導航鏈接。 它類似於 Link 組件，但它會在匹配當前 URL 時為呈現的元素添加樣式屬性。 NavLink 還提供了一個 activeClassName 道具，可用於在鏈接的路由處於活動狀態時應用類名。

activeClassName 屬性

React Router 中的 activeClassName 屬性用於指定一個類名，當它與當前 URL 匹配時將應用於該元素。 當鏈接或導航項與當前路線匹配時，這對於樣式化鏈接或導航項很有用。 它還可以用於向與路由沒有直接關係的元素添加額外的樣式，例如突出顯示導航欄中的當前活動選項卡。

為什麼 activeClassName 不起作用

ActiveClassName 是 React Router 的一項功能，它允許您將類添加到導航菜單中的活動鏈接。 不幸的是，它在 React Router 中不起作用，因為它依賴於瀏覽器的歷史記錄 API，而 React Router 中沒有。 這意味著 React Router 無法檢測用戶何時單擊鏈接並相應地應用 activeClassName。