如何在反应中将活动添加到引导导航栏？答案

【问题标题】：How can I add active to bootstrap navbar in react?如何在反应中将活动添加到引导导航栏？
【发布时间】：2020-04-17 22:44:09
【问题描述】：

我一直在尝试向用户所在的任何组件添加一个活动类。我不确定如何使用 activeClassName。

JSX 代码：

import React, { Component } from 'react';
import '../css/nav.scss';
import { Link, NavLink } from 'react-router-dom';
import 'react-bootstrap';
class Navbar extends Component {
  state = {};
  render() {
    return (
      <nav class="navbar sticky-top navbar-expand-lg">
        <Link to="/">
          <a class="navbar-brand" href="#">
            Web_Env
          </a>
        </Link>
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarNavDropdown"
          aria-controls="navbarNavDropdown"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item">
              <a class="nav-link" href="#">
                Create post
              </a>
            </li>
          </ul>
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <NavLink to="/login" style={{ textDecoration: 'none' }}>
                <a
                  className="nav-link"
                  href="#"
                  activeClassName="nav-link--active"
                >
                  Login
                </a>
              </NavLink>
            </li>
            <li class="nav-item">
              <NavLink to="/register" style={{ textDecoration: 'none' }}>
                <a className="nav-link" href="">
                  Register
                </a>
              </NavLink>
            </li>
          </ul>
        </div>
      </nav>
    );
  }
}

export default Navbar;

CSS代码：

$color1: #aceca1;
$bgcolor1: #629460;
.navbar {
  background-color: $bgcolor1 !important;
  .navbar-brand {
    color: lighten($color1, 10%);
    font-weight: bold;
    font-size: 2em;
  }
  a.nav-link {
    color: $color1;
    font-size: 1.1em;
    transition: 200ms;
  }
  a.nav-link .active {
    color: white;
    font-size: 1.3em;
  }
  a.nav-link:hover {
    color: white !important;
    transform: scale(1.1);
    text-decoration: none !important;
  }
}

如何根据用户所在的页面更改锚标记的样式。例如，如果它们在寄存器中，那么导航栏中的寄存器将是粗体并具有更大的字体。

【问题讨论】：

这能回答你的问题吗？ How do I add an active class to a Link from React Router?

标签： react-router

【解决方案1】：

  <li className="nav-item">
    <NavLink
      to="/register"
      className="nav-link"
      activeClassName="nav-link--active"
    >
      Register
    </NavLink>
  </li>;

您可以删除锚标记。请注意，我保留了您示例中的 nav-link--active 类，但您的样式表目前似乎没有为该类设置规则。另请注意，您在示例中使用了 class 关键字。这是一个保留关键字。在任何 React 组件中的 CSS 类都应该使用 className 属性。

您也可以这样做：

  <li className="nav-item">
    <NavLink
      to="/register"
      className="nav-link"
      activeStyle={{ fontWeight: 'bold' }}
    >
      Register
    </NavLink>
  </li>;

【讨论】：

【解决方案2】：

应该这样做：

<a className="nav-link" href="">
  { window.location.href.search("register") > -1 ? <b> Register </b> : Register }
</a>

window.location.href 获得当前地址，如果匹配“注册”，则文本将显示为粗体。

您可以使用相同的逻辑根据您的位置地址应用不同的样式。

【讨论】：

【解决方案3】：

我认为最好的方法是使用 NavLink 类，因为它默认提供了这个活动属性。

先导入

import { NavLink } from 'react-router-dom';

使用activeClassName 获取活动类属性并将其设置为active。

<NavLink to="/" activeClassName="active">
     Home
</NavLink>

<NavLink to="/store" activeClassName="active">
     Store
</NavLink>

<NavLink to="/about" activeClassName="active">
     About Us
</NavLink>

通过属性 active 在 CSS 中为您的课程设置样式。
```
.active{
    background-color: red;
 }
```

【讨论】：