在Navlink上激活时渲染不同的组件

Question

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

NavLink

是否可以在<NavLink to={route} exact activeClassName="selected" > <Icon>{icon}</Icon> </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
};

通过这种方式，您实际上是在检查要渲染的路径是否为活动路径，以防选择正确的图标

Answer 2

对于更独立的组件，无需以特殊方式将其连接到上下文或redux。您可以使用react-router中的HOC元素withRouter。打包后，您可以使用组件的匹配项，位置和历史记录。因此，您可以检查到位置对象的路由/到路径的字符串。

https://reacttraining.com/react-router/web/api/withRouter