How can i change className to active on li on exact route in reactJS

Question

How can we change parent li className to active on the clicked route, any help would be appreciated

Problem is that li is the parent of ROUTER->LINK

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

class Header extends Component {
    render() {
        return(
            <header className="nk-header nk-header-opaque">
                <nav className="nk-navbar nk-navbar-top nk-navbar-sticky nk-navbar-transparent nk-navbar-autohide">
                    <div className="container">
                        <div className="nk-nav-table">

                            <a href="index.html" className="nk-nav-logo">
                                <img src="assets/images/logo.png" alt="" width="90" />
                            </a>


                            <ul className="nk-nav nk-nav-right hidden-md-down" data-nav-mobile="#nk-nav-mobile">
                                <li className="active">
                                     <Link to="/" activeClassName="active">Home</Link>
                                </li>
                                <li className="  ">
                                     <Link to="/Product" activeClassName="active">Product</Link>
                                </li>
                            </ul>
                        </div>
                    </div>
                </nav>
            </header>     
        );
    }
}

export default Header;

@ Raj please refer this : https://stackoverflow.com/questions/34418254/how-do-i-add-an-active-class-to-a-link-from-react-router — Archna Rangrej, Aug 01 '18 at 07:12
change that will add styling attributes to the rendered element when it matches the current URL. — max li, Aug 01 '18 at 07:23
@maxli thanks for reply, but i have to add class on li not to link — Raj Jaril, Aug 01 '18 at 07:34
create a function const activeClass = (route) => { return if (this.props.location.pathname === route) "active" : null } use on

score 3 · Answer 1 · answered Aug 01 '18 at 07:39

First thing its better to construct a JSON obj of a menu item,

  const modules : [
  {
    id : 1,
    name : 'Home',
    linkTo : '/',
  },
  {
    id : 2,
    name : 'Product',
    linkTo : '/product',
  }
]

Now in your render method get the requested path name

let requestedPath = this.context.router.route.location.pathname;

Now, render the menu items

return(
        <header className="nk-header nk-header-opaque">
            <nav className="nk-navbar nk-navbar-top nk-navbar-sticky nk-navbar-transparent nk-navbar-autohide">
                <div className="container">
                    <div className="nk-nav-table">
                        <a href="index.html" className="nk-nav-logo">
                            <img src="assets/images/logo.png" alt="" width="90" />
                        </a>
                        <ul className="nk-nav nk-nav-right hidden-md-down" data-nav-mobile="#nk-nav-mobile">
                          {modules.map((module, index) => {
                            let className = module.linkTo === requestedPath ? 'active' : '';
                            return (
                              <li className="active" key={index}>
                                   <Link to={module.linkTo} className={className}>{module.name}</Link>
                              </li>
                            )
                          })}
                      </ul>
                    </div>
                </div>
            </nav>
        </header>
    );

Note : I didnt compiled the code.

score 3 · Accepted Answer · answered Aug 01 '18 at 08:43

Add this in render

const activeClass = (route) => { return location.pathname === route ? "active" : null }

And li should be this:

 <li className={activeClass("/")}>
      <Link to="/">Home</Link>
 </li>
 <li className={activeClass("/Product")}>
      <Link to="/Product">Product</Link>
 </li>

How can i change className to active on li on exact route in reactJS

2 Answers2