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

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

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

.active-link {color: red;
}

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

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

在這個(gè)例子中，我們將選中鏈接的文本顏色設(shè)置為藍(lán)色，并添加了下劃線。

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

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

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

請(qǐng)使用以下方式

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

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

navLink的api講解筆記

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

NavLink的API和屬性

activeClassName

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

activeStyle

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

exact

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

strict

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

to

to是NavLink的必需屬性，它指定鏈接的目標(biāo)URL。to可以是一個(gè)字符串，也可以是一個(gè)對(duì)象。如果to是一個(gè)字符串，則它應(yīng)該是鏈接的路徑。如果to是一個(gè)對(duì)象，則它應(yīng)該具有以下屬性：

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

基本的使用案例和場(chǎng)景

下面是一個(gè)基本的使用案例，它演示了如何使用NavLink來(lái)創(chuàng)建一個(gè)簡(jiǎn)單的導(dǎo)航欄：

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>);
}

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

下面是一個(gè)稍微復(fù)雜一些的使用場(chǎng)景，它演示了如何使用activeClassName和activeStyle來(lái)突出顯示當(dāng)前頁(yè)面的鏈接：

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設(shè)置為“active”，以使當(dāng)前頁(yè)面的鏈接突出顯示。我們還可以在CSS中定義.active類來(lái)設(shè)置樣式。如果您想直接在代碼中指定樣式，您可以使用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>);
}

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

代碼和注釋

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

import React from "react";
import { NavLink } from "react-router-dom";function Navigation() {// 定義在活動(dòng)狀態(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;

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

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