How to change the header style depending on page in ReactJs?

JavaScript
1

Hello,

I have a header with background image, I want this header style to only display in Homepage and remove that background in different pages:

1920×1080 334 KB

When I go to other pages I only want the nav items to display. Does this function work with props?
Or do I have to create another Header file for this purpose?
Header.js:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Navbar, Nav, Col, Row, NavbarBrand } from 'react-bootstrap';
import { NavLink } from 'react-router-dom';
import $ from 'jquery';
import AuthService from '../auth/AuthService';
import logo2 from '../../../imgs/logo2.png';

class Header extends Component {

    constructor(props) {
        super(props);

        this.state = { user: null }
    
        this.doLogout = this.doLogout.bind( this )
        this.authService = new AuthService
    }

    componentDidMount() {
        this.setState({
            user: this.authService.getUser()
        });
    }

    doLogout() {
        this.authService.clearUserData()
        window.location = '/login'
    }

    

    render() {
        return (
    <div className="header-dark">
        <Navbar className="navbar navbar-default">
            <div className="container">
                <Navbar.Header className="navbar-header">
                    <NavbarBrand>
                        <img src={logo2} />
                    </NavbarBrand>
                    <Navbar.Toggle />
                </Navbar.Header>
                <Navbar.Collapse className="navbar-collapse">
                    {/* -- Left nav -- */}
                    <ul className="nav navbar-nav">
                        <li><NavLink className="header_link" to="/"> Home </NavLink></li>
                        <li><NavLink className="header_link" to="/about"> About </NavLink></li>
                        <li><NavLink className="header_link" to="faq"> FAQs </NavLink></li>
                    </ul>

                    {/* -- Right nav -- */}
                    <Nav className="navbar-text navbar-right p">
                        { ! this.state.user && <li><NavLink className="navbar-link login" to="/login"> Login </NavLink></li> }
                        { ! this.state.user && <li><NavLink className="btn btn-default action-button" to="/register" style={{backgroundColor: '#FF8844'}}> Create an account </NavLink></li> }

                        { this.state.user && <li><NavLink className="header_link" to="/admin-dashboard"> Admin Dashboard </NavLink></li> }
                        { this.state.user && <li>
                            <a className="header_link" onClick={ this.doLogout }>
                                <span><FaUser /></span> Logout ({ this.state.user.name })
                            </a>
                        </li>  }
                    </Nav>
                </Navbar.Collapse>
            </div>
        </Navbar>

        <div className="container hero">
            <Row>
                <Col md={8} mdOffset={2}>
                    <h1 className="text-center"><strong>Warshaplus</strong></h1>
                </Col>
            </Row>
        </div>
    </div>
        )
    }
}
export default Header;

Index.js:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

//Pages
import Home from './Home';
import About from './main_pages/About';
import Faq from './main_pages/Faq';
import Signup from './main_pages/Signup';
import Login from './main_pages/Login';
import Terms from './main_pages/Terms';
import Privacy from './main_pages/Privacy';
import Header from './header_footer/Header';
import Footer from './header_footer/Footer';

//Dashboards
import Admin_Dashboard from './dashboards/admin_dashboard/Admin_Dashboard';
import Vendor_Dashboard from './dashboards/vendor_dashboard/Vendor_Dashboard';
import Customer_Dashboard from './dashboards/customer_dashboard/Customer_Dashboard';

// auth wrapper
import AuthenticatedWrapper from './auth/AuthenticatedWrapper'

const Layout = ({ children }) => (
    <div>
      <Header />
        {children}
      <Footer />
    </div>
  );

ReactDOM.render((
    <BrowserRouter>
        <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/register" component={Signup} />
            <Route path="/login" component={Login} />
            {/* Authenticated routes */}
            {/* dashboard routes */}
            <AuthenticatedWrapper path="/admin-dashboard" component={Admin_Dashboard} />
            <AuthenticatedWrapper path="/vendor-dashboard" component={Vendor_Dashboard} />
            <AuthenticatedWrapper path="/customer-dashboard" component={Customer_Dashboard} />

            {/* pages that have same header and footer */}
            <Layout>
              <Route path="/about" component={About} />
              <Route path="/faq" component={Faq} />
              <Route path="/terms-&-conditions" component={Terms} />
              <Route path="/privacy-policy" component={Privacy} />
            </Layout>

        </Switch>
    </BrowserRouter>),
  document.getElementById('root')
);
2

You don’t even need any props, you can include another Route right within the Header that would go like

<Route path='/' exact component={HeroImage} />
1 Like
3

To make sure I understood

You mean I create a const named HeroImage in Header.js and replace the code with <HeroImage />

So whenever I add <Header /> in other files it won’t render <HeroImage />?

4

Yes, just a simple functional component that renders the image, or probably better the entire container:

const HeroContainer = () => (
  <div className="container hero">
    <Row>
      <Col md={8} mdOffset={2}>
         <h1 className="text-center"><strong>Warshaplus</strong></h1>
      </Col>
    </Row>
  </div>
)

Then replace the hero container in the Header’s .render() method:

<Route path='/' exact component={HeroContainer} />

Now the hero container will only render on your home page… here’s a simple example:

It would have to be inside a BrowserRouter though… but then why would you use Header in other files files other than your index.js anyway?

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.