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

JavaScript
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