Reactjs 如何在另一页上隐藏搜索栏

我正在做React.js电影项目，在导航到另一个页面时做一些设计更改，比如隐藏搜索栏

这里有一些js文件供参考

Home.js

 <HeroImage
 image={`${IMAGE_BASE_URL}${BACKDROP_SIZE}${heroImage.backdrop_path}`}
 title={heroImage.original_title}
 text={heroImage.overview}/>
 <Header callback={this.searchItems}/>
 </div> : null }
 <div className="rmdb-home-grid">
 <FourColGrid
  header={searchTerm ? 'Search Result' : 'Popular Movies'}
 loading={loading}             >
 {movies.map( (element, i) => (
 <MovieThumb
 key={i}
 clickable={true}
 image={element.poster_path ? 
`${IMAGE_BASE_URL}${POSTER_SIZE}${element.poster_path}` : 
'./images/no_image.jpg'}
  movieId={element.id}
 movieName={element.original_title}
    />
  ))}

：null}
{movies.map（（元素，i）=>(
))}

App.js

<React.Fragment>
    <Header />
    <Switch>
      <Route path="/" component={Home} exact />
      <Route path="/:movieId" component={Movie} exact />
      <Route component={NotFound} />
    </Switch>

Header.js{/*搜索栏代码*/}

 <div className="rmdb-searchbar">
 <div className="rmdb-searchbar-content">
 <input type="text" className="rmdb-searchbar-input"
 placeholder="Search..."
 onFocus={(e) => e.target.placeholder = " "} 
 onBlur={(e) => e.target.placeholder= "Search..."}
 onChange={this.doSearch}
 value={this.state.value} />
 <FontAwesome className="rmdb-fa-search circle icon" 
 name="search" size="2x"/>
 </div>
 </div>

e、 target.placeholder=”“}
onBlur={（e）=>e.target.placeholder=“搜索…”
onChange={this.doSearch}
value={this.state.value}/>

你几乎没有选择

您可以使用switch并选择在哪个路由中显示哪个组件。 或者，如果您使用react router，您可以使用道具获取您的位置；如果不使用react router，则可以使用文档获取您的位置，然后执行以下操作：

{ifIsTrue && <SearchBar />}

{IFisture&&}

基本上，当用户离开某个页面时，您需要您的

头

组件订阅更新或使用有关

路径名的新信息进行更新

使用来自react router dom库的路由器
。这将向Header组件传递更新的道具，包括新的
路径名
等信息

然后，您可以通过
props.location.pathname
中的道具提取该路径名。有了这些数据，我们可以使用条件逻辑来确定要在哪些页面上显示您的搜索栏

在下面的示例中，我们将对其进行设置，以便仅当您在
Home
路线上时才显示搜索栏

Header.js

import { withRouter } from "react-router-dom

const Header = (props) => {
    const location = props.location.pathname;
    const atHome = location === "/";

   return (
     <div>
        ...other markup
        {atHome && (
          <div className="rmdb-searchbar">
            <div className="rmdb-searchbar-content">
              <input
                 type="text"
                 className="rmdb-searchbar-input"
                 placeholder="Search..."
                 onFocus={e => (e.target.placeholder = " ")}
                 onBlur={e => (e.target.placeholder = "Search...")}
                 onChange={this.doSearch}
                 value={this.state.value}
              />
              <FontAwesome
                 className="rmdb-fa-search circle icon"
                 name="search"
                 size="2x"
               />
             </div>
           </div>
         )}

     </div>
   )
}

export default withRouter(Header)

从“react router dom”导入{withRouter}
常数头=（道具）=>{
const location=props.location.pathname；
常量atHome=location==“/”；
返回(
…其他标记
{atHome&&(
（e.target.placeholder=“”）}
onBlur={e=>（e.target.placeholder=“搜索…”）
onChange={this.doSearch}
value={this.state.value}
/>
)}
)
}
使用路由器导出默认值（标题）

我在这个代码沙盒中复制了一些类似的东西供您参考：
您在哪里使用了
SearchBar
组件？我在Header.js文件中使用了它……正如您在上面看到的className=“rmdb SearchBar”“。当导航到另一个页面时，我想隐藏搜索栏hi@Pranav你有没有运气集成解决方案？Hello@Christophengo我创建了一个完全不同的组件，然后从主页调用它，当导航到另一个页面时，搜索栏消失。”。非常感谢你的帮助