仅在一个页面上关闭NavBar图标

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页面上的图标，因此您必须更新它才能按照您的意愿行事。 但是，根据您想要使用的检查和页面数量，您可以通过可维护的功能/方法获得更好的效果。

Answer 2

在您的菜单中添加一些课程，例如class="menu menu-hidden-icon ..etc.."，您就可以使用以下内容隐藏您的图标：

.menu-hidden-icon .sidebar-icon {
    display: none;
}

Answer 3

您可以找到路径网址并应用hide() JQuery功能。

var pathUrl = window.location.pathname;
if(pathUrl == '/menu'){
  $(".header-left").hide();
}

Answer 4

所有这些都有效，但我选择了@Lucas Reppe Welander的答案，因为它允许图标在导航时恢复。非常感谢大家。我所做的就是像这样翻转逻辑：

{this.props.router.location.pathname === "/grid" 
   ? null 
   : <img className="menu-icon" onClick={()=> this.onMenu()} src={"../icons/hamburger.svg"} /> }