How to change the header style based on specific route in react js?

Question

Basically I have a header like this,

function Header() {
  return (
    <div className="header">
      <nav className="navbar navbar-expand-lg navbar-light fixed-top ">
        <Link className="navbar-brand order-0 nav-link" to="/">
          DASA
        </Link>
      </nav>
    </div>
  );
}

export default Header;

Now, whenever I want this header beside home page. I want to its fixed-top property and also want to change its background-color which I have mentioned in the css file. How would I do it? I also looked this answer here but could not figure out how to use it in my case?

Here is my app.js file.

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

function App() {
  return (
    <Router>
      <div className="App">
        <Switch>
          {/* Men Category Route  */}
          <Route path="/men">
            <Header></Header>
            <Men></Men>
            <Footer></Footer>
          </Route>

          {/* Women Category Route  */}
          <Route path="/women">
            <Header></Header>
            <Women></Women>
            <Footer></Footer>
          </Route>
          {/* Women Category Route  */}
          <Route path="/kids">
            <Header></Header>
            <Kids></Kids>
            <Footer></Footer>
          </Route>
          {/* Authentication Route */}

          <Route path="/MenCategory">
            <MenProduct></MenProduct>
          </Route>
          <Route path="/signin">
            <Header></Header>
            <Authentication></Authentication>
            <Footer></Footer>
          </Route>
          {/* Home Route👇 */}
          <Route path="/">
            <Header></Header>
            <Home></Home>
            <Footer></Footer>
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;

Right now, I am using react-router-dom for changing my route and all that. If any other information is need please let me know.

What are you using react-router ? And if so which version? We need more information about your route-management library. — J. Doe
– J. Doe, Commented Dec 4, 2020 at 15:19
I am using react-router-dom. I am preety new in this. What I know is I am using its latest version and if that's not the case I can update to its latest version. Or let me know if can do this with any other library — Aman Chaudhary
– Aman Chaudhary, Commented Dec 4, 2020 at 15:23

Badal Saibo · Accepted Answer · 2020-12-04 16:38:01Z

9

If you're using the latest version of react-router-dom you can use the useLocation() hook. It will return a location object which has the property pathname that you can use to check the url and apply condition as needed.

Assuming your homepage is the root url '/'. In you Header component do this.

import { useLocation } from 'react-router-dom';

function Header() {
  const { pathname } = useLocation();
 
  return (
    <div className="header" style={{ backgroundColor: pathname === '/' ? 'lightblue' : 'lightgreen' }}>
      <nav className={`navbar navbar-expand-lg navbar-light ${pathname === '/' ? 'fixed-top' : ''}`}>
        <Link className="navbar-brand order-0 nav-link" to="/">
          DASA
        </Link>
      </nav>
    </div>
  );
}

export default Header;

edited Dec 4, 2020 at 16:38

answered Dec 4, 2020 at 15:38

Badal Saibo

3,9131 gold badge18 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Badal Saibo Over a year ago

It should work. Here's a codesandbox. Try removing the 'none' value from backgroundColor. It isn't a valid CSS property so you might see no change in navbar styles. Use 'transparent' instead, which is valid.

Collectives™ on Stack Overflow

How to change the header style based on specific route in react js?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related