Breaking News: Grepper is joining You.com. Read the official announcement!

activeclassname in react router v6

Gyanendra Kumar answered on May 21, 2022 Popularity 9/10 Helpfulness 6/10

answer activeclassname in react router v6

related activeClassName react router

activeclassname in react router v6

Comment

export function Header() {
  return (
    <header>
      <ul>
        <li>
          <NavLink className={(navData) => navData.isActive ? "active" : "" } to="/about" />
        </li>
        <li>
          <NavLink className={(navData) => navData.isActive ? "active" : "" } to="/profile" />
        </li>
      </ul>
    </header>
  )
}

Popularity 9/10 Helpfulness 6/10 Language javascript

Source: stackoverflow.com

Tags: javascript react-router

Link to this answer
Share Copy Link

Contributed on May 21 2022

Gyanendra Kumar

0 Answers Avg Quality 2/10

Closely Related Answers

activeClassName react router

Comment

// Before React Router v6, to set class for active element we used:
 <NavLink to="/start" activeClassName="HERE NAME CLASS WHEN COMPONENT IS ACTIVE">start</NavLink>

// Now, instead of activeClassName="HERE..." use:
className={(navLinkObj) => "start-selected_" + navLinkObj.isActive}

// And then in css use:
.start-selected_true {
  background-color: red;
  border-bottom: 5px solid yellow;
}

// Also, you can do the same for inactive link. In css use:
.start-selected_false {
  background-color: blue;
  border-bottom: 5px dashed green;
}

// PS: (navLinkObj.isActive) returns true if element is active and false if element is not
// PS: I really advice you to check out documentation of React Router. It helped me :)
// React Router Documentation: https://v5.reactrouter.com/web/api

Popularity 9/10 Helpfulness 6/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on May 23 2022

The Stanliest Stanley

0 Answers Avg Quality 2/10

activeclassname in react router v6

Contents

More Related Answers

activeclassname in react router v6

Closely Related Answers

activeClassName react router

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.