在 Navlink 上处于活动状态时渲染不同的组件

Question

我正在使用react-router的NavLink组件来显示侧边栏菜单，并且在NavLink我有一个图标。我想更改图标，以便在链接处于活动状态时填充图标。代码是这样的：

<NavLink
  to={route}
  exact
  activeClassName="selected"
>
  <Icon>{icon}</Icon>
</NavLink>

有没有办法在一个NavLink组件内渲染不同的组件？

Answer 1

您可以在渲染函数中执行类似的操作：

class YourComponent extends React.Component {
  render() {
    var isActive = this.context.router.route.location.pathname === this.props.to;

    return(
        <NavLink
          to={route}
          exact
          activeClassName="selected"
        >
         <Icon>{isActive && icon || otherIcon}</Icon>
        </NavLink>
    );
  }
}

NavLink.contextTypes = {
    router: PropTypes.object
};

通过这种方式，您实际上是在检查您正在渲染的路线是否是活动路线，并在万一选择正确的图标