2

Добрый день!

Есть компонент 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 пример

Заранее спасибо за ответы!

1 ответ 1

1

Посмотрите в сторону Redux (диспатчера событий). Создаете событие "Смена фона", в нем обновляете ваш store, в который будете ложить например bodyBackground. В Header пропишите background = bodyBackground. Затем при рендере какого-либо роута диспатчете событие "Смена фона".

Но есть и другой способ. Вынести Header и Footer в каждый компонент и в каждом месте передавать свое изображение(цвет фона)

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.