Добрый день!
Есть компонент header
import React from 'react';
import {Link, HashRouter} from 'react-router-dom'
import cart from '../img/cart.png';
import SliderNav from '../components/sliding-menu'
const Header = () => (
<header>
<div className="nav-field">
<div className="row">
<div className="col-lg-7 col-md-7 col-sm-7 col-xs-6">
<nav className="navbar-header">
<HashRouter>
<div>
<ul>
<li><Link to="/">Главная</Link></li>
<li><Link to="/catalog">Каталог</Link></li>
<li><Link to="/about_us">О нас</Link></li>
<li><Link to="/news">Новости</Link></li>
<li><Link to="/contacts">Контакты</Link></li>
</ul>
</div>
</HashRouter>
</nav>
<div id="sliding-menu">
<SliderNav />
</div>
</div>
<div className="col-lg-5 col-md-5 col-sm-5 col-xs-6">
<div className="register-box">
<div className="cart">
<HashRouter>
<Link to="/cart"><img src={cart} alt=""/></Link>
</HashRouter>
</div>
<div className="buttons" id="reg-buttons">
<button>вход</button>
<button>регистрация</button>
</div>
</div>
</div>
</div>
</div>
<div className="header-circle">
<p>авторские селекционные формы и сорта винограда</p>
</div>
</header>
);
export default Header;
являющийся частью App
import React from 'react';
import './App.css'
import Header from './components/header';
import Routes from './routes';
import Footer from './components/footer';
const App = () => (
<div>
<Header />
<Routes />
<Footer />
</div>
);
export default App;
Есть router
import React from 'react'
import {Route, HashRouter} from 'react-router-dom'
import Main from './pages/main'
import Catalog from './pages/catalog'
import About_us from './pages/about_us'
import NewsApp from './pages/news'
import Contacts from './pages/contacts'
import Cart from './pages/cart'
import LogIn from './pages/log_in'
import Registration from './pages/registration'
const Routes = () => (
<HashRouter>
<div className="main">
<Route exact path="/" component={Main}/>
<Route path="/catalog" component={Catalog}/>
<Route path="/about_us" component={About_us}/>
<Route path="/news" component={NewsApp}/>
<Route path="/contacts" component={Contacts}/>
<Route path="/cart" component={Cart}/>
<Route path="/log_in" component={LogIn}/>
<Route path="/registration" component={Registration}/>
</div>
</HashRouter>
);
export default Routes;
Задача такая. Нужно изменить фон компонента header при переключении страниц и удаление div className="header-circle"
c заменой на нужный div.
вот вариант не на react пример хочу сделать так же используя react пример
Заранее спасибо за ответы!