reactjs - 尝试在 React Router 的 NavLink 中使用 Bootstrap Nav Pills
问题描述
我在使用默认引导导航药丸作为我页面导航栏上的链接时遇到问题,它们会显示药丸是否处于活动状态。因为我有代码,所以 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 的默认药丸样式按钮主动显示当前正在显示的页面。
解决方案
推荐阅读
- docker - 码头集装箱内未经授权的 WGet
- javascript - 根据 Javascript 中的今天日期获取下一个或最后一个日期和月份
- internet-explorer-9 - 字体真棒 all.js 文件在 ie9 中不起作用
- c - 如何将二维数组传递给 C 中大小未知的函数?
- php - 通过 file_get_contents 发送 url 参数返回 nothig
- html - 使用元素在 Google 电子表格中使用 XPath 导入 XML
- php - 为什么我无法通过 opencart 中的 php+curl 获取真实内容?
- python - 使用 isinstance 方法的 Python 3 意外行为
- django - 验证未以 django 形式运行
- javascript - JSON 是否可以用于存储/访问静态数据?