Попытка использовать Bootstrap Nav Pills в NavLink React Router

Question

У меня проблемы с использованием таблеток Bootstrap Nav по умолчанию в качестве ссылок на панели навигации для моей страницы, где они показывают, активна ли таблетка или нет.Поскольку у меня есть код, NavLink просто в текстовом формате, и я не могу использовать какой-либо активный стиль из Bootstrap.

Я использую Bootstrap 4 и React with 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 css для компонента NavLink.

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

Ссылка