Question

我正在为我的应用程序构建navbar组件，但我遇到了activeClassName prop的问题。当我在链接之间切换时，它不会更改任何类或样式。我已经尝试过我在互联网上看到的所有内容，但没有结果。也许有人可以就这个问题给我一个建议。

我的进口商品：

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>

谢谢

Answer 1

可能的原因是您使用Redux来管理应用程序的状态

https://github.com/reactjs/react-redux/blob/master/docs/troubleshooting.md#my-views-arent-updating-when-something-changes-outside-of-redux

如果您的观点取决于全局状态或React“上下文”，您可以   发现用connect（）修饰的视图将无法更新。

这是因为connect（）默认实现了shouldComponentUpdate，   假设您的组件将产生相同的结果   相同的道具和国家。这与React的概念类似   PureRenderMixin。

最快的（ 不是最好的 ）解决方案是将pure：false选项传递给具有NavLink的组件的connect（）函数（在我看来，这是标题）

function mapStateToProps(state) {
  return { test: state.test}
}

export default connect(mapStateToProps, null, null, {
  pure: false
})(Header)

这将消除Header是纯粹的并且导致它的假设每当其父组件呈现时更新。请注意，这将使你的应用程序性能较差，所以只有你没有其他应用程序才能执行此操作选项。

带有Reactstrap和React Router Dom的Active NavLink

1 个答案: