尝试在 React Router 的 NavLink 中使用 Bootstrap Nav Pills

Question

我在使用默认 Bootstrap Nav 丸作为我页面导航栏上的链接时遇到问题，它们会显示丸是否处于活动状态。因为我有代码，所以 NavLink 只是纯文本，我似乎无法使用 Bootstrap 中的任何活动样式。

我正在使用 Bootstrap 4 和 React 与 React Router。

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

class NavBar extends Component {
  render() {
    return (
      <nav className="navbar navbar-expand-lg bg-light navbar-light">
        <ul className="nav nav-pills">{this.renderNavLinks()}</ul>
      </nav>
    );
  }

  renderNavLinks() {
    const navButton = {
      padding: "10px"
    };
    return this.props.navLinks.map(l => (
      <li className="nav-item" style={navButton}>
        <NavLink className="active" to={"/" + l.id}>{l.text}</NavLink>
      </li>
    ));
  }
}

export default NavBar;

我希望我的 NavBar 使用 Bootstrap 的默认药丸样式按钮主动显示当前正在显示的页面。

Answer 1

您缺少NavLink 组件上的nav-link css 类。

<NavLink className="nav-link" to={"/" + l.id}>{l.text}</NavLink>

Reference