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

【问题标题】：Render different components when active on Navlink在 Navlink 上激活时渲染不同的组件
【发布时间】：2018-07-30 10:20:55
【问题描述】：

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

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

有没有办法在NavLink 组件中渲染不同的组件？

【问题讨论】：

标签： reactjs react-router

【解决方案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
};

这样你实际上是在检查你正在渲染的路线是否是活动路线，以防选择正确的图标

【讨论】：

太好了！非常感谢！
很好的答案，你能解释一下你从哪里得到这个：this.context？是否可以在功能组件中获取它？

【解决方案2】：

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

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

【讨论】：

是的，这也是一个不错的选择，但在我工作的项目中，这个组件从来没有withRouter HOC。谢谢！