Question

我在使用默认的Bootstrap Nav药丸作为页面的Navbar上的链接时遇到麻烦，它们在其中显示该药丸是否处于活动状态。正如我所得到的代码一样，NavLink只是纯文本格式，我似乎无法使用Bootstrap中的任何活动样式。

我正在使用Bootstrap 4和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

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

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

Reference

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

1 个答案: