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

Active class in react-router-dom

pra's play answered on May 23, 2022 Popularity 7/10 Helpfulness 4/10

answer Active class in react-router-dom

related activeClassName react router

Active class in react-router-dom

Comment

import React from 'react';
import { NavLink } from 'react-router-dom';

const Header = () => {
  return (
    <div>
      <nav className="navbar navbar-expand-lg navbar-light bg-primary">
        <NavLink exact to="/" className="nav-link" activeClassName="active">Home</NavLink>
        <NavLink to="/register" className="nav-link" activeClassName="active">Register</NavLink>
        <NavLink to="/login" className="nav-link" activeClassName="active">Login</NavLink>
        <NavLink to="/profile" className="nav-link" activeClassName="active">Profile</NavLink>
      </nav>
    </div>
  );
}

export default Header;

In App.css file

add below code:

.navbar-nav .nav-link.active {
  color: orange !important;
}

Popularity 7/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: class javascript react-router-dom

Link to this answer
Share Copy Link

Contributed on Jun 10 2023

pra's play

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

Active class in react-router-dom

Contents

More Related Answers

Active class in react-router-dom

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.