NavLink 精確道具不適用於 react-router-dom 6

Question

我目前正在使用

    "react-router": "^6.0.0-beta.0",
    "react-router-dom": "^6.0.0-beta.0",

我現在面臨的 react-router-dom 的 NavLink 的問題是根路徑“/”始終處於活動狀態，其他路徑沒有問題，並且它們在切換期間處於活動狀態和非活動狀態，它只是根路徑給我帶來麻煩，我已經搜索並嘗試了許多解決方案。 但沒有任何效果。 同時使用“exact”和“exact={true}”，但沒有成功。

用了這個：

<NavLink
          className="iconContainer"
          exact={true}
          to="/"
          activeClassName="isActive"
        >
          <span className="menu-title">Home</span>
        </NavLink>

還有這個：

<NavLink
          className="iconContainer"
          exact
          to="/"
          activeClassName="isActive"
        >
          <span className="menu-title">Home</span>
        </NavLink>

過去兩天我一直陷入這種情況，但仍然沒有成功找到任何解決方案。 任何幫助將不勝感激，謝謝

編輯：我的路線

<Routes>
 
                <Route
                    exact
                    path="order/:orderId"
                    element={<OrderDetails />}
                ></Route>
                <Route
                    exact
                    path="orders"
                    element={<Orders />}
                ></Route>
                <Route
                    exact
                    path="/"
                    element={<Home />}
                ></Route>

                
      </Routes>

Answer 1

Exact 參數將不再適用於 NavLink 組件。 在版本 6 Beta 中，他們包含了一個名為： end

使用這種簡單的方法，您只需為您的NavLink組件傳遞end參數並exact地傳遞給您Route

<NavLink end to="/">
      Go to Home
    </NavLink>

當您編寫 end="another-class-active" active ，您可以更改默認處於活動狀態的活動類名。

正如@Greg Wozniak 提到的 end 是一個布爾值，所以你不能用這個改變活動的類名，而不是這個你可以將一個函數傳遞給 className：

className={({ isActive }) =>
    isActive ? 'activeClassName' : undefined
}

有關更多信息，請閱讀： https ://reactrouter.com/docs/en/v6/api#navlink

工作示例： https ://codesandbox.io/s/vigorous-thompson-e7k8eb

請注意，這仍然是 Beta 版本，因此我們需要等待一些修復和正式發布

Answer 2

在 6.0.2 中，您可以將一個函數傳遞給 className，該函數會獲得一組道具。 其中一個道具是“isActive”。 這是我為 OP 代碼解決它的方法：

<NavLink
    className={(props) => {
      return `${props.isActive ? 'isActive ' : ''}iconContainer`;
    }}
    end
    to="/"
  >
    <span className="menu-title">Home</span>
</NavLink>

另請注意，“活動”類是由 NavLink 自動設置的。

還要注意 end 的使用：“如果使用了 end 屬性，它將確保該組件在其后代路徑匹配時不匹配為“活動”。例如，呈現僅在網站根目錄處活動的鏈接而不是任何其他 URL”

Answer 3

但是，我是這樣做的，您NavLink像官方文檔LINK TO THE DOCS所說的那樣在 NavLink 的情況下使用精確

   <NavLink to="/service" className='turner'>
      Services
   </NavLink>