尝试在React路由器的NavLink中使用引导Nav药丸
我有麻烦使用默认的引导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的默认药丸样式按钮。
共有1个答案
-
我正在学习如何通过在线教程做出反应。 这是一个关于使用React路由器的基本示例： 与我的应用程序组件： 但是，我在使用IndexRoute时遇到问题，因为它没有显示任何内容，所以我在npm上搜索react router dom v4模块，但里面没有IndexRoute。相反，它使用的是： 那么，我如何渲染2组件为1路径？
-
我试图使用react router 4的URL来确定某个视图数据应该如何排序。 （导航图像） 所以每个导航链接都指向同一个页面，只是在最后更改参数。例如。 /home/：general /home/比基尼 /家居/内衣 等 这是可行的，但是activeClassName参数被应用于它们 有没有办法使导航链接仅将样式应用于具有精确链接的链接。 路由组件 一些导航链接的片段 我知道这正在发生，因为这是
-
如果我将路由折叠起来，这样看起来就像： 工作很好。我嵌套的原因是因为我将在“dashboard”下有多个子项，并且希望它们都在URL中以为前缀。
-
是否有一个正式的方法来导入我定义的路由，并从另一个React组件重定向到该路由器中的命名模式？ 假设我的路线如下所示： 我有这样一个组件： 两个问题： 我是否应该使用或其他React-路由器方法来处理编程重定向？ 有没有办法导入路由器并重定向到命名的路由？ 我想写这样的东西：
-
我想从API中读取要显示的产品。然后，当我按下其中一个显示的产品时，它应该使用url中的产品ID和要在页面上查看的产品详细信息将我路由到一个组件，以获取有关该产品的详细信息。我在这里读取了API中的数据，并详细显示了产品。 我想通过产品ID添加一个路由链接。如何将详细信息作为其他组件的道具发送？
-
令人惊讶的是，在Google和StackOverflow中很难找到它，我在这里问，在React路由器中使用