Search
 
SCRIPT & CODE EXAMPLE
 
CODE EXAMPLE FOR JAVASCRIPT

activeClassName react router

// 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
 
PREVIOUS NEXT
Tagged: #activeClassName #react #router
ADD COMMENT
Topic
Name
2+4 =