How do I add an active class to a Link from React Router?

Question

I've created a bootstrap-style sidebar using Link. Here is a snippet of my code:

<ul className="sidebar-menu">
  <li className="header">MAIN NAVIGATION</li>
  <li><Link to="dashboard"><i className="fa fa-dashboard"></i> <span>Dashboard</span></Link></li>
  <li><Link to="email_lists"><i className="fa fa-envelope-o"></i> <span>Email Lists</span></Link></li>
  <li><Link to="billing"><i className="fa fa-credit-card"></i> <span>Buy Verifications</span></Link></li>
</ul>

I want to set the class for the active path to active on the wrapping element <li>. I see there are other solutions out there that show how to do this like Conditionally set active class on menu using react router current route, however I don't think that it's the best way to set an active class on a wrapper to a Link.

I also found https://github.com/insin/react-router-active-component but it feels like it is unnecessary.

In React Router, is this possible or do I need to use an external solution?

score 108 · Accepted Answer · edited Mar 09 '23 at 17:38

108

On the Link component you can now add activeClassName or set activeStyle.

These allow you to easily add styles to the currently active link.

Previously, you could create a custom component that works like a wrapper to Link with the following logic.

In a file called nav_link.js

import React from 'react';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';

class NavLink extends React.Component {
    render() {
        var isActive = this.context.router.route.location.pathname === this.props.to;
        var className = isActive ? 'active' : '';

        return(
            <Link className={className} {...this.props}>
                {this.props.children}
            </Link>
        );
    }
}

NavLink.contextTypes = {
    router: PropTypes.object
};

export default NavLink;

And use it as given below in your component:

// ...
import NavLink from "./nav_link";
// ...

<nav>
    <ul className="nav nav-pills pull-right">
        <NavLink to="/">
            <i className="glyphicon glyphicon-home"></i> <span>Home</span>
        </NavLink>
        <NavLink to="about">
            <i className="glyphicon glyphicon-camera"></i> <span>About</span>
        </NavLink>
    </ul>
</nav>

edited Mar 09 '23 at 17:38

GabLeRoux

16,715
16
63
81

answered Mar 29 '16 at 07:17

Vijey

6,536
7
43
50

contentTypes in NavLink component should be static property not an instance property. Please correct. – Oleh Nov 17 '16 at 14:33
2

Why not use `activeStyle` or `activeClassName` exposed by `react-router`. There is some [documentation](https://github.com/reactjs/react-router-tutorial/tree/master/lessons/05-active-links) around it. – Hozefa Nov 21 '16 at 23:32
1

It appears that this no longer works as of react-router v4.0.0, as `router.isActive` no longer exists. See: https://github.com/react-bootstrap/react-router-bootstrap/issues/186 – chazzlabs Mar 14 '17 at 02:02
1

With react-router 3.0.0 , got `TypeError: Cannot read property 'location' of undefined` – Mithril Aug 17 '17 at 01:45
Yes it should be the accepted answer. It worked beautifully for me! However, there is more to the config than just these steps. For me, it just made sure that my components in my nav were wrapped with this. There were other steps that made this work in the grand scheme of things. I will share them here a bit later when I have a moment. – Maria Campbell Oct 04 '17 at 11:35
When I tested this with Jest, it failed. It returned an error and/or undefined. So I looked into things further and played around more with code. I finally came up with a solution and it passed! I will be writing a post about it over the weekend and will share my results here. it was tricky and I had to do a good deal of research, refactoring and testing before I got there! So I'm sorry that I had to subsequently downvote this. Technically it worked, but it failed my test. – Maria Campbell Oct 05 '17 at 23:06
I used this code but when I navigate on my menu links, the class is not changing until I reload the page. What should I do to make it rerendered again every time I click on a Link? – cusmar Jun 04 '18 at 10:07

score 86 · Answer 2 · edited Jan 14 '18 at 16:02

86

React-Router V4 comes with a NavLink component out of the box

To use, simply set the activeClassName attribute to the class you have appropriately styled, or directly set activeStyle to the styles you want. See the docs for more details.

<NavLink
  to="/hello"
  activeClassName="active"
>Hello</NavLink>

edited Jan 14 '18 at 16:02

Tamer Shlash

9,314
5
44
82

answered Jun 21 '17 at 18:15

Matt

4,462
5
25
35

This is on the _wrapper_ to the link. – Rob Grant Jul 02 '17 at 19:40
20

This outputs an anchor tag. The OP wants something that will output a list item. – zeckdude Dec 01 '17 at 05:39
2

Is this really working? I tried same but it's not working for me. – user9437856 May 03 '20 at 15:23

score 19 · Answer 3 · answered Oct 07 '20 at 11:07

19

For me what worked has is using NavLink as it has this active class property.

First import it

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

Use an activeClassName to get the active class property.

<NavLink to="/" activeClassName="active">
 Home
</NavLink>

<NavLink to="/store" activeClassName="active">
 Store
</NavLink>

<NavLink to="/about" activeClassName="active">
 About Us
</NavLink>

Style your class in the css by the property active.
```
.active{
  color:#fcfcfc;
 }
```

answered Oct 07 '20 at 11:07

Fahad Shinwari

968
7
7

3

this works, thanks, found a solution to turn off the Home always being active also: https://stackoverflow.com/questions/51214763/navlink-from-react-router-dom-home-always-active/51214772 – Hank May 17 '21 at 17:13

score 14 · Answer 4 · edited Jul 18 '19 at 10:56

This is my way, using location from props. I don't know but history.isActive got undefined for me

export default class Navbar extends React.Component {
render(){
const { location } = this.props;

const homeClass = location.pathname === "/" ? "active" : "";
const aboutClass = location.pathname.match(/^\/about/) ? "active" : "";
const contactClass = location.pathname.match(/^\/contact/) ? "active" : "";


return (
<div>
      <ul className="nav navbar-nav navbar-right">
        <li className={homeClass}><Link to="/">Home</Link></li>
        <li className={aboutClass}><Link to="about" activeClassName="active">About</Link></li>
        <li className={contactClass}><Link to="contact" activeClassName="active">Contact</Link></li>
      </ul>

</div>
    );}}

score 12 · Answer 5 · edited Nov 09 '17 at 21:39

12

Answer updated with ES6:

import React, { Component } from 'react';
import { Link } from 'react-router'

class NavLink extends Component {
    render() {
        let isActive = this.context.router.isActive(this.props.to, true);
        let className = isActive ? "active" : "";

        return (
            <li className={className}>
                <Link {...this.props}/>
            </li>
        );
    }
}

NavLink.contextTypes = {
    router: React.PropTypes.object
};

export default NavLink;

Then use it as described above.

edited Nov 09 '17 at 21:39

BenWurth

790
1
7
23

answered Nov 10 '16 at 15:15

Mario Bašić

141
1
7

4

`this.context.route` was undefined me for (newer version?), you can make work using `withRouter` function which passes router in params – romanlv Jan 20 '17 at 19:48

score 9 · Answer 6 · answered Jul 30 '19 at 06:06

9

Just use NavLink rather than Link. It will add .active class automatically.

<Nav className="mr-auto">
    <Nav.Link as={NavLink} to="/home">Home</Nav.Link>
    <Nav.Link as={NavLink} to="/users">Users</Nav.Link>
</Nav>

answered Jul 30 '19 at 06:06

BaiJiFeiLong

3,716
1
30
28

score 8 · Answer 7 · edited Nov 10 '17 at 00:13

I didn't like the idea of creating a custom component, because if you have a different wrapping element you would have to create another custom component etc. Also, it is just overkill. So I just did it with css and activeClassName:

<li className="link-wrapper">  <!-- add a class to the wrapper -->
  <Link to="something" activeClassName="active">Something</Link>
</li>

And then just add some css:

li.link-wrapper > a.active {
    display: block;
    width: 100%;
    height:100%;
    color: white;
    background-color: blue;
}

Technically this doesn't style the li, but it makes the anchor fill the li and styles it.

score 5 · Answer 8 · answered Jun 14 '18 at 20:49

With react-router-dom@4.3.1 (though any 4.x.x should do I guess), we can use the withRouter HOC to accomplish this. For example, I want to implement the Bootstrap navbar and since it requires a class of active on <li class="nav-item"> and not on the anchor tag, I made a new component called NavItem to encapsulate a single li.nav-item. The implementation is as follows:

import React from "react";
import { Link, withRouter } from "react-router-dom";

const NavItem = ({ isActive, to, label }) => {
  let classes = ["nav-item"];
  if (isActive) classes.push("active");

  return (
    <li className={classes.join(" ")}>
      <Link className="nav-link" to={to}>
        {label}
      </Link>
    </li>
  );
};

export default withRouter(({ location, ...props }) => {
  const isActive = location.pathname === props.to;

  console.log(location.pathname, props.to);

  return <NavItem {...props} isActive={isActive} />;
});

As you can see, NavItem is just a stateless functional component which expects an isActive prop to determine whether active class should be added. Now, to update this prop as the location changes, we can make use of the withRouter HOC. You can pass any component to this function and it'll give it { match, location, history } objects in its props along with the ones you pass down. Here, I am creating a functional component inline which receives these objects and determines whether the current link is the active one using the location.pathname property. This'll give us a Boolean and we can return the NavItem along with isActive set to the value we computed using location.pathname.

A working example of this can be found here. Please let me know if there's an easier way to do this.

score 5 · Answer 9 · answered Jun 14 '18 at 23:48

As of react-router-dom@4.3.1, we can just easily use the NavLink with activeClassName instead of Link. Example:

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

class NavBar extends Component {
  render() {
    return (
      <div className="navbar">
        <ul>
          <li><NavLink to='/1' activeClassName="active">1</NavLink></li>
          <li><NavLink to='/2' activeClassName="active">2</NavLink></li>
          <li><NavLink to='/3' activeClassName="active">3</NavLink></li>
        </ul>
      </div>
    );
  }
}

Then in your CSS file:

.navbar li>.active {
  font-weight: bold;
}

The NavLink will add your custom styling attributes to the rendered element based on the current URL.

Document is here

score 5 · Answer 10 · answered Feb 21 '19 at 14:12

5

To set class on the active navigation element

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

&

<NavLink to="/Home" activeClassName="active">Home</NavLink>

answered Feb 21 '19 at 14:12

Prasanna Jathan

570
7
12

Deepak kumar debug · Answer 11 · 2020-09-15T06:52:02.487

Current React Router Version 5.2.0

activeStyle is a default css property of NavLink component which is imported from react-router-dom

So that we can write our own custom css to make it active.In this example i made background transparent and text to be bold.And I store it on a constant named isActive

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

    function nav() {

          const isActive = {
            fontWeight: "bold",
            backgroundColor: "rgba(255, 255, 255, 0.1)",
          };
    
    return (
          <ul className="navbar-nav mr-auto">
            <li className="nav-item">
              <NavLink className="nav-link" to="/Shop" activeStyle={isActive}>
                Shop
              </NavLink>
            </li>
          </ul>
          );

    export default nav;

Throws error: `Error: Invariant failed: You should not use outside a ` — dipenparmar12, Mar 11 '21 at 12:12

Mehmet Recep Yildiz · Answer 12 · 2022-02-14T10:25:23.893

In react router Version 6, we're doing it by NavLink and setting its className property.

We're specifying a function which will be called on every route change here.

   import { NavLink } from 'react-router-dom';
   
   import classes from './MainHeader.module.css';
   
   const MainHeader = () => {
     return (
       <header className={classes.header}>
         <nav>
           <ul>
             <li>
               <NavLink className={({isActive}) => isActive ? classes.active : ''} to='/welcome'>
                 Welcome
               </NavLink>
             </li>
             <li>
               <NavLink className={({isActive}) => isActive ? classes.active : ''} to='/products'>
                 Products
               </NavLink>
             </li>
           </ul>
         </nav>
       </header>
     );
   };
   
   export default MainHeader;

also, you can find a whole tutorial on it on this link

Thanks, this works! Maybe you should consider add ```js to you codesample for colorize — Ale DC, Feb 10 '22 at 13:34
Thanks for the colorization suggestion. It also worked :) Generally, stackoverflow colorizes on its own. It seems that for the jsx we need to add some hints for it :) — Mehmet Recep Yildiz, Feb 14 '22 at 12:23

score 4 · Answer 13 · edited Nov 10 '17 at 00:19

You can actually replicate what is inside NavLink something like this

const NavLink = ( {
  to,
  exact,
  children
} ) => {

  const navLink = ({match}) => {

    return (
      <li class={{active: match}}>
        <Link to={to}>
          {children}
        </Link>
      </li>
    )

  }

  return (
    <Route
      path={typeof to === 'object' ? to.pathname : to}
      exact={exact}
      strict={false}
      children={navLink}
    />
  )
}

just look into NavLink source code and remove parts you don't need ;)

Ismoil Shokirov · Answer 14 · 2020-05-16T14:19:18.603

import React from 'react';
import {withRouter, Link} from "react-router-dom";

const SidenavItems = (props) => {
                                     // create simple list of links
    const items = [
        {
            type: "navItem",
            icon: "home",
            text: "Home",
            link: "/",
            restricted: false
        },
        {
            type: "navItem",
            icon: "user-circle",
            text: "My Profile",
            link: "/user",
            restricted: false
        },
        {
            type: "navItem",
            icon: "sign-in",
            text: "Login",
            link: "/login",
            restricted: false
        },
    ];

    const element = (item, i) => {  // create elements (Links)
                        // check if this is a current link on browser
        let active = "";

        if (props.location.pathname === item.link) {
            active = "active";
        }

        return (
            <div key={i} className={item.type}>
                <Link
                    to={item.link}
                    className={active} // className will be set to "active" 
                >                      // or ""
                    {item.text}
                </Link>
            </div>
        )
    };

    const showItems = () => {     // print elements
        return items.map((item, i) => {
            return element(item, i)
        })
    };

    return (
        <div>
            {showItems()}  // print all the links we created in list
        </div>
    )
};
export default withRouter(SidenavItems);

Hello! While this code may solve the question, [including an explanation](https://meta.stackexchange.com/q/114762) of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please [edit] your answer to add explanations and give an indication of what limitations and assumptions apply. — Brian61354270, Apr 24 '20 at 13:34

score 4 · Answer 15 · answered Nov 17 '21 at 11:35

React Router v6:

Source: Active NavLink Classes with React Router

You'll want to use the className property which now accepts a function and passes an isActive boolean property:

<NavLink
  to="users"
  className={({ isActive }) => (isActive ? 'active' : 'inactive')}
>
  Users
</NavLink>

This is great for adding multiple classes too, and was a breaking change in v6 beta:

<NavLink
  to="users"
  className={({ isActive }) =>
    isActive ? 'bg-green-500 font-bold' : 'bg-red-500 font-thin'
  }
>
  Users
</NavLink>

Read more and live demo: Active NavLink Classes with React Router

score 3 · Answer 16 · answered Sep 25 '19 at 21:15

Expanding on @BaiJiFeiLong's answer, add an active={} property to the link:

<Nav.Link as={Link} to="/user" active={pathname.startsWith('/user')}>User</Nav.Link>

This will show the User link as active when any path starts with '/user'. For this to update with each path change, include withRouter() on the component:

import React from 'react'
import { Link, withRouter } from 'react-router-dom'
import Navbar from 'react-bootstrap/Navbar'
import Nav from 'react-bootstrap/Nav'

function Header(props) {
    const pathname = props.location.pathname

    return (
        <Navbar variant="dark" expand="sm" bg="black">
            <Navbar.Brand as={Link} to="/">
                Brand name
            </Navbar.Brand>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav">
                <Nav className="mr-auto">
                    <Nav.Link as={Link} to="/user" active={pathname.startsWith('/user')}>User</Nav.Link>
                    <Nav.Link as={Link} to="/about" active={pathname.startsWith('/about')}>About</Nav.Link>
                </Nav>
            </Navbar.Collapse>
        </Navbar>
    )
}

export default withRouter(Header)   // updates on every new page

score 2 · Answer 17 · edited Jun 20 '20 at 09:12

One of the way you can use it

When you are using the Functional component then follow the instruction here.

add a variable in your component
create an event change browser URL change/or other change
re-assign the current path (URL)
use javascript match function and set active or others

Use the above code here.

import React, { useEffect } from 'react';
import { Link } from 'react-router-dom';

const NavItems = () => {
    let pathname = window.location.pathname;
    useEffect(() => {
        pathname = window.location.pathname;
    }, [window.location.pathname]);

    return (
        <>
            <li className="px-4">
                <Link to="/home" className={`${pathname.match('/home') ? 'link-active' : ''}`}>Home</Link>
            </li>
            <li className="px-4">
                <Link to="/about-me" className={`${pathname.match('/about-me') ? 'link-active' : ''}`}>About-me</Link>
            </li>
            <li className="px-4">
                <Link to="/skill" className={`${pathname.match('/skill') ? 'link-active' : ''}`}>Skill</Link>
            </li>
            <li className="px-4">
                <Link to="/protfolio" className={`${pathname.match('/protfolio') ? 'link-active' : ''}`}>Protfolio</Link>
            </li>
            <li className="pl-4">
                <Link to="/contact" className={`${pathname.match('/contact') ? 'link-active' : ''}`}>Contact</Link>
            </li>
        </>
    );
}

export default NavItems;

--- Thanks ---

is it possible to match against 2 paths? So for example if one of the paths is true set the class to active Something like this: ${pathname.match('/protfolio' || /anotherpath) — Lyubomir Ivanov Valchev, Oct 04 '20 at 09:09
@LyubomirIvanovValchev you can use logical operator like as: (${pathname.match('/protfolio') || ${pathname.match("/anotherpath") )? 'active-url' : ' ' — Md. Abu Sayed, Oct 05 '20 at 08:34
can you suggest a better way if we have more path on single tab — Rahman Haroon, Mar 17 '21 at 11:38

score 1 · Answer 18 · answered May 27 '18 at 18:29

The answer by Vijey has a bit of a problem when you're using react-redux for state management and some of the parent components are 'connected' to the redux store. The activeClassName is applied to Link only when the page is refreshed, and is not dynamically applied as the current route changes.

This is to do with the react-redux's connect function, as it suppresses context updates. To disable suppression of context updates, you can set pure: false when calling the connect() method like this:

//your component which has the custom NavLink as its child. 
//(this component may be the any component from the list of 
//parents and grandparents) eg., header

function mapStateToProps(state) {
  return { someprops: state.someprops }
}

export default connect(mapStateToProps, null, null, {
  pure: false
})(Header);

Check the issue here: reactjs#470

Check pure: false documentation here: docs

Subhadip Majumder · Answer 19 · 2019-05-30T11:47:27.237

Its very easy to do that, react-router-dom provides all.

import React from 'react';
import { matchPath, withRouter } from 'react-router';
    
class NavBar extends React.Component {
  render(){
    return(
       <ul className="sidebar-menu">
      <li className="header">MAIN NAVIGATION</li>
      <li className={matchPath(this.props.location.pathname, { path: "/dashboard" }) ? 'active' : ''}><Link to="dashboard"><i className="fa fa-dashboard"></i> 
        <span>Dashboard</span></Link></li>
      <li className={matchPath(this.props.location.pathname, { path: "/email_lists" }) ? 'active' : ''}><Link to="email_lists"><i className="fa fa-envelope-o"></i> 
        <span>Email Lists</span></Link></li>
      <li className={matchPath(this.props.location.pathname, { path: "/billing" }) ? 'active' : ''}><Link to="billing"><i className="fa fa-credit-card"></i> 
        <span>Buy Verifications</span></Link></li>
    </ul>
      )
   }
}
    
export default withRouter(NavBar);

Wrapping You Navigation Component with withRouter() HOC will provide few props to your component: 1. match 2. history 3. location

here i used matchPath() method from react-router to compare the paths and decide if the 'li' tag should get "active" class name or not. and Im accessing the location from this.props.location.pathname.

changing the path name in props will happen when our link is clicked, and location props will get updated NavBar also get re-rendered and active style will get applied

score 1 · Answer 20 · answered Jul 25 '19 at 09:47

Since router v4 I am using 'refs' for setting the parent active class:

<ul>
  <li>
    <NavLink
      innerRef={setParentAsActive}
      activeClassName="is-active"
      to={link}
    >
    {text}
  </NavLink>
</ul>

NavLink's innerRef prop accepts callback function, which will receive DOM node as an argument. You can use then any DOM manipulation possible, in this case simply set parent element (<li>) to have the same class:

  const setParentAsActive = node => {
    if (node) {
      node.parentNode.className = node.className;
    }
  };

Drawbacks:

<a> will have unnecessary is-active class (as you only need it for <li>), or you can remove this class in the callback func.
if you change the element structure, f.e. wrap a tag inside a span, your callback will stop working, but it's possible to write more sofisticated DOM traverse function
you have to do some DOM manipulation

score 1 · Answer 21 · answered Sep 25 '21 at 20:20

<Navbar bg="light" expand="lg">
<Container>
    <Navbar.Brand>
        <Nav.Link as="{NavLink}" to="/">Brand Name</Nav.Link>
    </Navbar.Brand>
    <Navbar.Toggle aria-controls="basic-navbar-nav" />
    <Navbar.Collapse id="basic-navbar-nav">
        <nav className="me-auto">
            <Nav.Link as="{NavLink}" to="/" exact>Home</Nav.Link>
            <Nav.Link as="{NavLink}" to="/about">About</Nav.Link>
            <Nav.Link as="{NavLink}" to="/contact">Contact</Nav.Link>
            <NavDropdown title="Dropdown" id="basic-nav-dropdown">
                <Nav.Link as="{NavLink}" to="/page1">Dropdown Link 1</Nav.Link>
                <Nav.Link as="{NavLink}" to="/page2">Dropdown Link 2</Nav.Link>
                <Nav.Link as="{NavLink}" to="/page3">Dropdown Link 3</Nav.Link>
            </NavDropdown>
        </nav>
    </Navbar.Collapse>
</Container>

Some explanation would make this a better answer. – isherwood Sep 27 '21 at 19:08 — isherwood, Sep 27 '21 at 19:08

score 1 · Answer 22 · answered Mar 14 '22 at 17:01

1

react-router-dom@v6

import { NavLink } from "react-router-dom";

<NavLink className = {isActive => isActive? 'active-css-class': 'general-css-class'}>link</NavLink>

answered Mar 14 '22 at 17:01

masterscode

11
3

See "[Explaining entirely code-based answers](https://meta.stackoverflow.com/q/392712/128421)". While this might be technically correct, it doesn't explain why it solves the problem or should be the selected answer. We should educate along with helping solve the problem. – the Tin Man Mar 22 '22 at 04:49

score 1 · Answer 23 · answered Mar 30 '22 at 15:20

1

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

class NavBar extends Component {
  render() {
    return (
      <div className="navbar">
        <ul>
          <li><NavLink to='/1' activeClassName="active">1</NavLink></li>
          <li><NavLink to='/2' activeClassName="active">2</NavLink></li>
          <li><NavLink to='/3' activeClassName="active">3</NavLink></li>
        </ul>
      </div>
    );
  }
}

this works for my...

answered Mar 30 '22 at 15:20

Miguel-Malaj

11
1

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 30 '22 at 15:31

score 0 · Answer 24 · answered Sep 19 '20 at 13:13

Use React Hooks.

import React, { useState } from 'react';

export const Table = () => {

const [activeMenu, setActiveMenu] = useState('transaction');

return(
<>
 <Link className="flex-1 mr-2">
          <a
            id="transaction"
            className={
              activeMenu == 'transaction'
                ? 'text-center block border border-blue-500 rounded py-2 px-4 bg-blue-500 hover:bg-blue-700 text-white'
                : 'text-center block border border-white rounded hover:border-gray-200 text-blue-500 hover:bg-gray-200 py-2 px-4'
            }
            href="#"
            onClick={() => {
              setActiveMenu('transaction');
            }}>
            Recent Transactions
          </a>
        </Link>
        <Link className="flex-1 mr-2">
          <a
            id="account"
            className={
              activeMenu == 'account'
                ? 'text-center block border border-blue-500 rounded py-2 px-4 bg-blue-500 hover:bg-blue-700 text-white'
                : 'text-center block border border-white rounded hover:border-gray-200 text-blue-500 hover:bg-gray-200 py-2 px-4'
            }
            href="#"
            onClick={() => {
              setActiveMenu('account');
            }}>
            Account Statement
          </a>
        </LInk>

</>
)
}

score 0 · Answer 25 · edited Jan 07 '22 at 00:31

0

<NavLink to='/' activeClassName='active'>
        Home
</NavLink>

I just used NavLink and activeClassName without wrapping it up in any component or something but my Code still works :)

edited Jan 07 '22 at 00:31

Peter Csala

17,736
16
35
75

answered Jan 06 '22 at 20:12

Rajiv Sharma

96
5

KARTHIKEYAN.A · Answer 26 · 2022-06-06T16:09:50.293

0

We can use NavLink tag to highlight active link using isActive property

style:

const useStyles = makeStyles(theme => ({
active: {
    borderBottom: '1px solid white',
    color: 'yellow',
    fontSize: '14px',
    marginLeft: '16px',
    textDecoration: 'none',
},}));

Component:

const classes = useStyles()
<NavLinks {...classes}/>
const NavLinks = classes => {
    return (<>
        <NavLink 
             to='/' 
             className={
             useCallback(({isActive}) => isActive ? classes.active : classes.link)}
        >
            Home
        </NavLink>
    </>)
}

edited Jun 06 '22 at 16:09

answered Jun 06 '22 at 16:03

KARTHIKEYAN.A

18,210
6
124
133

May be a stupid question, but why using `useCallback` here ? – Louis Lecouturier Jan 08 '23 at 18:36

score 0 · Answer 27 · answered Aug 20 '22 at 18:51

0

In - react material-ui, react-router-dom V5

<NavLink style={(isActive)=>({textDecoration: 'none', color: isActive ? '#1976d2':'inherit'})} to={`/`}>{`text`}</NavLink>

this way can apply the active link style

answered Aug 20 '22 at 18:51

Rahul.S

343
7
16

score -3 · Answer 28 · edited Nov 12 '21 at 10:45

-3

In react-router-dom documantion you use navlink instead of link. https://v5.reactrouter.com/web/api/NavLink

import { NavLink } from "react-router-dom"; 
<Nav>
  <NavLink exact activeClassName="active--link" to="/" className="your class" > Home </NavLink> 
 <NavLink exact to="/classes" activeClassName="active--link" className="your class" > Classes </NavLink>
</Nav>
<NavLink to="/hello" activeClassName="active">Hello</NavLink>

edited Nov 12 '21 at 10:45

Abhishek Dutt

1,308
7
14
24

answered Nov 10 '21 at 10:29

asad minhas

147
2
10

This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/30305013) – Abhishek Dutt Nov 12 '21 at 04:08
import { NavLink } from "react-router-dom";
Home Classes
– asad minhas Nov 12 '21 at 10:17
@AbhishekDutt i hope this will help.. – asad minhas Nov 12 '21 at 10:17
https://stackoverflow.com/a/70359939/9166529 – asad minhas Dec 15 '21 at 07:42

score -7 · Answer 29 · edited Oct 10 '19 at 00:30

-7

Using Jquery for active link:

$(function(){
    $('#nav a').filter(function() {
        return this.href==location.href
    })
    .parent().addClass('active').siblings().removeClass('active')

    $('#nav a').click(function(){
        $(this).parent().addClass('active').siblings().removeClass('active')
    })
});

Use Component life cycle method or document ready function as specified in Jquery.

edited Oct 10 '19 at 00:30

Das_Geek

2,775
7
20
26

answered Oct 09 '19 at 13:37

shaik Nayeem

15

Dude, it is wrong to answer to the question in React with JQuery approach – Ismoil Shokirov Mar 26 '21 at 05:50

How do I add an active class to a Link from React Router?

29 Answers29

One of the way you can use it

Linked

Related