react中设置activeClassName的笔记

React是一种流行的JavaScript库，用于构建动态用户界面。它具有许多有用的组件，其中之一是NavLink组件。NavLink组件用于在React应用程序中创建链接，并且它具有许多有用的属性，例如选中的样式设置。

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

在React中，NavLink组件的选中样式设置可以通过activeClassName属性进行设置。该属性指定当链接处于活动状态时应用的CSS类名。例如，如果您想将选定的链接的文本颜色更改为红色，则可以将activeClassName属性设置为“active-link”，然后在CSS中定义以下样式：

.active-link {
	color: red;
}
1
2
3

此外，NavLink还具有一个名为activeStyle的属性，该属性允许直接指定选中链接的CSS样式。例如，如果您想将选中的链接的文本颜色更改为蓝色并添加下划线，则可以在NavLink组件中设置activeStyle属性，如下所示：

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

在这个例子中，我们将选中链接的文本颜色设置为蓝色，并添加了下划线。

除了activeClassName和activeStyle属性之外，NavLink还具有其他一些属性，例如exact和strict。exact属性用于确保链接的路径完全匹配，而strict属性用于确保链接的路径与当前URL的末尾斜杠匹配。

React中的NavLink组件使得创建链接和处理选中的样式变得非常简单和直观。通过使用activeClassName和activeStyle属性，您可以轻松地自定义选中链接的样式，从而提高用户体验。

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

请使用以下方式

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

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

navLink的api讲解笔记

React是一种流行的JavaScript库，它可以帮助开发人员构建复杂的Web应用程序。在React中，NavLink是一个非常有用的组件，它可以帮助我们轻松地为导航栏添加样式和路由功能。在本文中，我们将深入研究NavLink的API和属性，并提供基本的使用案例和场景，以及代码和注释。

NavLink的API和属性

activeClassName

activeClassName是NavLink的一个属性，它定义了当链接处于活动状态时使用的CSS类名。例如，如果您想在导航栏中突出显示当前页面的链接，您可以将activeClassName设置为“active”，然后在CSS中定义.active类来设置样式。

activeStyle

activeStyle是NavLink的另一个属性，它允许您定义链接在活动状态下使用的样式。与activeClassName不同，您可以在activeStyle中直接指定CSS属性和值，而不需要在CSS文件中定义类名。例如，您可以将activeStyle设置为{fontWeight: “bold”, color: “red”}，以使当前链接加粗并显示为红色。

exact

exact是NavLink的一个布尔属性，它指定链接是否必须与当前URL精确匹配才能处于活动状态。默认情况下，exact为false，这意味着如果链接的路径与当前URL的路径匹配，则它将处于活动状态。如果您将exact设置为true，则链接必须与当前URL的路径完全匹配才能处于活动状态。

strict

strict是NavLink的另一个布尔属性，它指定链接是否应该严格匹配路径。默认情况下，strict为false，这意味着如果链接的路径是当前URL路径的子集，则它将处于活动状态。如果您将strict设置为true，则链接必须与当前URL的路径完全匹配才能处于活动状态。

to

to是NavLink的必需属性，它指定链接的目标URL。to可以是一个字符串，也可以是一个对象。如果to是一个字符串，则它应该是链接的路径。如果to是一个对象，则它应该具有以下属性：

• pathname：链接的路径
• search：查询字符串
• hash：URL中的哈希值
• state：一个对象，它将与URL一起传递，可以在目标页面中使用。

基本的使用案例和场景

下面是一个基本的使用案例，它演示了如何使用NavLink来创建一个简单的导航栏：

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>
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

在上面的代码中，我们导入了NavLink组件，并使用它来创建三个链接。我们将exact设置为true，以确保只有当链接的路径与当前URL完全匹配时才会处于活动状态。我们还没有定义activeClassName或activeStyle，因此链接在活动状态下将没有任何特殊的样式。

下面是一个稍微复杂一些的使用场景，它演示了如何使用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>
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

在上面的代码中，我们将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>
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

在上面的代码中，我们定义了一个名为activeStyle的常量，它包含在活动状态下使用的CSS属性和值。然后，我们将activeStyle传递给每个NavLink组件的activeStyle属性。这将使当前页面的链接加粗并显示为红色。

代码和注释

下面是一个完整的代码示例，它演示了如何使用NavLink来创建一个具有样式和路由功能的导航栏：

import React from "react";
import { NavLink } from "react-router-dom";

function Navigation() {
  // 定义在活动状态下使用的CSS样式
  const activeStyle = {
    fontWeight: "bold",
    color: "red"
  };

  return (
    <nav>
      <ul>
        {/* 创建Home链接 */}
        <li>
          <NavLink exact to="/" activeClassName="active" activeStyle={activeStyle}>
            Home
          </NavLink>
        </li>
        {/* 创建About链接 */}
        <li>
          <NavLink to="/about" activeClassName="active" activeStyle={activeStyle}>
            About
          </NavLink>
        </li>
        {/* 创建Contact链接 */}
        <li>
          <NavLink to="/contact" activeClassName="active" activeStyle={activeStyle}>
            Contact
          </NavLink>
        </li>
      </ul>
    </nav>
  );
}

export default Navigation;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

在上面的代码中，我们首先导入React和NavLink。然后，我们定义了一个名为activeStyle的常量，它包含在活动状态下使用的CSS属性和值。接下来，我们使用NavLink创建三个链接，并将activeClassName和activeStyle设置为“active”和activeStyle，以使当前页面的链接突出显示。最后，我们将Navigation组件导出为默认值。

在本文中，我们深入研究了NavLink的API和属性，并提供了基本的使用案例和场景，以及代码和注释。NavLink是React中非常有用的组件之一，它可以帮助我们轻松地为导航栏添加样式和路由功能。如果您正在开发React应用程序，并且需要一个易于使用的导航组件，那么NavLink是一个很好的选择。