我正在为我的应用程序构建导航栏组件，但我在使用 activeClassName 道具时遇到了问题。当我在链接之间更改时，它不会更改任何类或样式。我已经尝试了我在互联网上看到的所有内容，但没有任何结果。也许有人可以就这个问题给我一个建议。
我的进口：
import React from 'react';
import { NavLink as RRNavLink } from 'react-router-dom';
import { Nav, NavItem, NavLink } from 'reactstrap';
这是我到目前为止的代码：
<Nav className="navbar-logged">
<NavItem>
<NavLink
className="nav-link-gdc"
activeClassName="active"
to="/home"
tag={RRNavLink}
>
INICIO
</NavLink>
</NavItem>
<NavItem>
<NavLink
className="nav-link-gdc"
activeClassName="active"
to="/secondLink"
tag={RRNavLink}
>
secondLink
</NavLink>
</NavItem>
<NavItem>
<NavLink
className="nav-link-gdc"
activeClassName="active"
to="/thirdLink"
tag={RRNavLink}
>
thirdLink
</NavLink>
</NavItem>
</Nav>
谢谢你
一个可能的原因是您使用 Redux 来管理应用程序的状态
如果您的视图依赖于全局状态或 React “上下文”，您可能会发现使用 connect() 修饰的视图将无法更新。
这是因为 connect() 默认实现了 shouldComponentUpdate，假设你的组件在给定相同的 props 和 state 的情况下会产生相同的结果。这是一个类似于 React 的 PureRenderMixin 的概念。
最快（不是最好的）解决方案是将 pure: false 选项传递给具有 NavLink(s) 的组件的 connect() 函数（在我的情况下是标题）
function mapStateToProps(state) {
return { test: state.test}
}
export default connect(mapStateToProps, null, null, {
pure: false
})(Header)
这将消除 Header 是纯的假设，并使其在其父组件呈现时更新。请注意，这会降低您的应用程序的性能，因此只有在您别无选择时才这样做。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句