带有 Reactstrap 和 React Router 的活动 NavLink Dom

Question

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

我的导入：

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

If your views depend on global state or React “context”, you might find that views decorated with connect() will fail to update.

This is because connect() implements shouldComponentUpdate by default, assuming that your component will produce the same results given the same props and state. This is a similar concept to React’s PureRenderMixin.

最快（不是最好的）解决方案是将 pure: false 选项传递给 connect() 函数具有您的 NavLink 的组件（在我的例子中是 Header）

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

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

This will remove the assumption that Header is pure and cause it to update whenever its parent component renders. Note that this will make your application less performant, so only do this if you have no other option.

带有 Reactstrap 和 React Router 的活动 NavLink Dom

Active NavLink with Reactstrap and React Router Dom

javascript

reactjs

react-router

reactstrap