React是一種流行的JavaScript庫，用于構建動態(tài)用戶界面。它具有許多有用的組件，其中之一是NavLink組件。NavLink組件用于在React應用程序中創(chuàng)建鏈接，并且它具有許多有用的屬性，例如選中的樣式設置。

react-router-dom": “^6.0.0”, 一下版本

在React中，NavLink組件的選中樣式設置可以通過activeClassName屬性進行設置。該屬性指定當鏈接處于活動狀態(tài)時應用的CSS類名。例如，如果您想將選定的鏈接的文本顏色更改為紅色，則可以將activeClassName屬性設置為“active-link”，然后在CSS中定義以下樣式：

.active-link {color: red;
}

此外，NavLink還具有一個名為activeStyle的屬性，該屬性允許直接指定選中鏈接的CSS樣式。例如，如果您想將選中的鏈接的文本顏色更改為藍色并添加下劃線，則可以在NavLink組件中設置activeStyle屬性，如下所示：

<NavLink to="/home" activeStyle={{ color: 'blue', textDecoration: 'underline' }}>Home</NavLink>

在這個例子中，我們將選中鏈接的文本顏色設置為藍色，并添加了下劃線。

除了activeClassName和activeStyle屬性之外，NavLink還具有其他一些屬性，例如exact和strict。exact屬性用于確保鏈接的路徑完全匹配，而strict屬性用于確保鏈接的路徑與當前URL的末尾斜杠匹配。

React中的NavLink組件使得創(chuàng)建鏈接和處理選中的樣式變得非常簡單和直觀。通過使用activeClassName和activeStyle屬性，您可以輕松地自定義選中鏈接的樣式，從而提高用戶體驗。

react-router-dom": “^6.0.0”, 一上版本

請使用以下方式

<NavLink className={({ isActive }) => (isActive ? " selectnav" : "")}to={ele.path}>{ele.name}
</NavLink>

isActive 是一個boolean 表示路徑是否匹配上 返回是一個class名字

navLink的api講解筆記

React是一種流行的JavaScript庫，它可以幫助開發(fā)人員構建復雜的Web應用程序。在React中，NavLink是一個非常有用的組件，它可以幫助我們輕松地為導航欄添加樣式和路由功能。在本文中，我們將深入研究NavLink的API和屬性，并提供基本的使用案例和場景，以及代碼和注釋。

NavLink的API和屬性

activeClassName

activeClassName是NavLink的一個屬性，它定義了當鏈接處于活動狀態(tài)時使用的CSS類名。例如，如果您想在導航欄中突出顯示當前頁面的鏈接，您可以將activeClassName設置為“active”，然后在CSS中定義.active類來設置樣式。

activeStyle

activeStyle是NavLink的另一個屬性，它允許您定義鏈接在活動狀態(tài)下使用的樣式。與activeClassName不同，您可以在activeStyle中直接指定CSS屬性和值，而不需要在CSS文件中定義類名。例如，您可以將activeStyle設置為{fontWeight: “bold”, color: “red”}，以使當前鏈接加粗并顯示為紅色。

exact

exact是NavLink的一個布爾屬性，它指定鏈接是否必須與當前URL精確匹配才能處于活動狀態(tài)。默認情況下，exact為false，這意味著如果鏈接的路徑與當前URL的路徑匹配，則它將處于活動狀態(tài)。如果您將exact設置為true，則鏈接必須與當前URL的路徑完全匹配才能處于活動狀態(tài)。

strict

strict是NavLink的另一個布爾屬性，它指定鏈接是否應該嚴格匹配路徑。默認情況下，strict為false，這意味著如果鏈接的路徑是當前URL路徑的子集，則它將處于活動狀態(tài)。如果您將strict設置為true，則鏈接必須與當前URL的路徑完全匹配才能處于活動狀態(tài)。

to

to是NavLink的必需屬性，它指定鏈接的目標URL。to可以是一個字符串，也可以是一個對象。如果to是一個字符串，則它應該是鏈接的路徑。如果to是一個對象，則它應該具有以下屬性：

• pathname：鏈接的路徑
• search：查詢字符串
• hash：URL中的哈希值
• state：一個對象，它將與URL一起傳遞，可以在目標頁面中使用。

基本的使用案例和場景

下面是一個基本的使用案例，它演示了如何使用NavLink來創(chuàng)建一個簡單的導航欄：

import { NavLink } from "react-router-dom";function Navigation() {return (<nav><ul><li><NavLink exact to="/">Home</NavLink></li><li><NavLink to="/about">About</NavLink></li><li><NavLink to="/contact">Contact</NavLink></li></ul></nav>);
}

在上面的代碼中，我們導入了NavLink組件，并使用它來創(chuàng)建三個鏈接。我們將exact設置為true，以確保只有當鏈接的路徑與當前URL完全匹配時才會處于活動狀態(tài)。我們還沒有定義activeClassName或activeStyle，因此鏈接在活動狀態(tài)下將沒有任何特殊的樣式。

下面是一個稍微復雜一些的使用場景，它演示了如何使用activeClassName和activeStyle來突出顯示當前頁面的鏈接：

import { NavLink } from "react-router-dom";function Navigation() {return (<nav><ul><li><NavLink exact to="/" activeClassName="active">Home</NavLink></li><li><NavLink to="/about" activeClassName="active">About</NavLink></li><li><NavLink to="/contact" activeClassName="active">Contact</NavLink></li></ul></nav>);
}

在上面的代碼中，我們將activeClassName設置為“active”，以使當前頁面的鏈接突出顯示。我們還可以在CSS中定義.active類來設置樣式。如果您想直接在代碼中指定樣式，您可以使用activeStyle屬性。

import { NavLink } from "react-router-dom";function Navigation() {const activeStyle = {fontWeight: "bold",color: "red"};return (<nav><ul><li><NavLink exact to="/" activeStyle={activeStyle}>Home</NavLink></li><li><NavLink to="/about" activeStyle={activeStyle}>About</NavLink></li><li><NavLink to="/contact" activeStyle={activeStyle}>Contact</NavLink></li></ul></nav>);
}

在上面的代碼中，我們定義了一個名為activeStyle的常量，它包含在活動狀態(tài)下使用的CSS屬性和值。然后，我們將activeStyle傳遞給每個NavLink組件的activeStyle屬性。這將使當前頁面的鏈接加粗并顯示為紅色。

代碼和注釋

下面是一個完整的代碼示例，它演示了如何使用NavLink來創(chuàng)建一個具有樣式和路由功能的導航欄：

import React from "react";
import { NavLink } from "react-router-dom";function Navigation() {// 定義在活動狀態(tài)下使用的CSS樣式const activeStyle = {fontWeight: "bold",color: "red"};return (<nav><ul>{/* 創(chuàng)建Home鏈接 */}<li><NavLink exact to="/" activeClassName="active" activeStyle={activeStyle}>Home</NavLink></li>{/* 創(chuàng)建About鏈接 */}<li><NavLink to="/about" activeClassName="active" activeStyle={activeStyle}>About</NavLink></li>{/* 創(chuàng)建Contact鏈接 */}<li><NavLink to="/contact" activeClassName="active" activeStyle={activeStyle}>Contact</NavLink></li></ul></nav>);
}export default Navigation;

在上面的代碼中，我們首先導入React和NavLink。然后，我們定義了一個名為activeStyle的常量，它包含在活動狀態(tài)下使用的CSS屬性和值。接下來，我們使用NavLink創(chuàng)建三個鏈接，并將activeClassName和activeStyle設置為“active”和activeStyle，以使當前頁面的鏈接突出顯示。最后，我們將Navigation組件導出為默認值。

在本文中，我們深入研究了NavLink的API和屬性，并提供了基本的使用案例和場景，以及代碼和注釋。NavLink是React中非常有用的組件之一，它可以幫助我們輕松地為導航欄添加樣式和路由功能。如果您正在開發(fā)React應用程序，并且需要一個易于使用的導航組件，那么NavLink是一個很好的選擇。