[英]How to change class when component is not equal to home than add class in header component in react.js?
I want to add a class in the header component when the route is not home.当路线不在家时,我想在标题组件中添加一个类。 My code is:
我的代码是:
App.js应用程序.js
<BrowserRouter>
<Header />
<Route exact path="/" component={Home}/>
<Route exact path="/shop" component={Shop}/>
<Route exact path="/contact" component={Contact}/>
<Footer />
</BrowserRouter>
Header.js component code: Header.js 组件代码:
<div className="all-category (here add-class when route is not equal to home)">
<h3 className="cat-heading"><i className="fa fa-bars" aria-hidden="true"></i>CATEGORIES</h3>
<ul className="main-category">
<li><a href="#">New Arrivals <i className="fa fa-angle-right" aria-hidden="true"></i></a>
<ul className="sub-category">
<li><a href="#">accessories</a></li>
<li><a href="#">best selling</a></li>
<li><a href="#">top 100 offer</a></li>
</ul>
</li>
</ul>
</div>
you can check props.history.location.pathname
in the header component Also make sure to wrap the header component in withRouter
eg:您可以检查
props.history.location.pathname
在头组件同时确保包裹在头组件withRouter
例如:
const Header = props => {
return <div className={props.history.location.pathname === '/anything' ? "YOUR_CLASS":""}>....</div>
}
export default withRouter(Header)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.