javascript - 仅在一个页面上关闭导航栏图标

Question

我想在菜单页面上下文(普通页面非模态)中关闭我的菜单图标，但为任何其他页面打开它。我正在使用 Meteor、React 和 React-Router。下图显示了基本结构。

我目前正在使用 ReactiveVar 更改 .header-center>span 中的标题文本，但它每页都会更改，所以这似乎是合理的。

我想要一种优雅的方式来关闭/隐藏一个页面的 .header-left>img 的内容，并在离开时恢复。不确定我应该用 CSS 还是 JS 来做。任何想法表示赞赏。

Answer 1

您可以使用 this.props.location.pathname 来了解何时关闭和打开它。像这样。

<div className="header-left">
    {this.props.location.pathname === 'home' ? <img className="sidebar-icon" /> : null}
</div>

此代码只会在 /home 页面上显示图标，因此您必须更新它以使其表现得像您想要的那样。但是，根据您要使用的支票和页面的数量，您可能会更好地使用此处可维护的功能/方法。