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

activeClassName react router

Add Answer

The Stanliest Stanley answered on May 21, 2022 Popularity 9/10 Helpfulness 6/10

answer activeClassName react router

related activeclassname in react router v6

related Active class in react-router-dom

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 react-router

Link to this answer
Share Copy Link

Contributed on May 23 2022

The Stanliest Stanley

0 Answers Avg Quality 2/10

Closely Related Answers

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 j

Link to this answer
Share Copy Link

Contributed on May 21 2022

Gyanendra Kumar

0 Answers Avg Quality 2/10

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 6/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: class javascript react-router-dom reac

Link to this answer
Share Copy Link

Contributed on Jun 10 2023

pra's play

0 Answers Avg Quality 2/10

activeClassName react router

Contents

More Related Answers

activeClassName react router

Closely Related Answers

activeclassname in react router v6

Active class in react-router-dom

Grepper

Documentation

Social

Legal

Contact

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