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    lt ul className  sidebar-menu  gt     lt li className  header  gt MAIN NAVIGATION lt  li gt     lt li gt  lt Link to  dashboard  gt  lt i className  fa fa-dashboard  gt  lt  i gt   lt span gt Dashboard lt  span gt  lt  Link gt  lt  li gt     lt li gt  lt Link to  email lists  gt  lt i className  fa fa-envelope-o  gt  lt  i gt   lt span gt Email Lists lt  span gt  lt  Link gt  lt  li gt     lt li gt  lt Link to  billing  gt  lt i className  fa fa-credit-card  gt  lt  i gt   lt span gt Buy Verifications lt  span gt  lt  Link gt  lt  li gt   lt  ul gt    I want to set the class for the active path to active on the wrapping element  lt li gt   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

User · Answer

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

User · Answer

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    lt NavLink   to   hello    activeClassName  active   gt Hello lt  NavLink gt

User · Answer

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

User · Answer

Use React Hooks  import React    useState   from  react    export const Table        gt     const  activeMenu  setActiveMenu    useState  transaction     return   lt  gt    lt Link className  quot flex-1 mr-2 quot  gt             lt a             id  quot transaction quot              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  quot   quot              onClick       gt                  setActiveMenu  transaction                   gt              Recent Transactions            lt  a gt           lt  Link gt           lt Link className  quot flex-1 mr-2 quot  gt             lt a             id  quot account quot              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  quot   quot              onClick       gt                  setActiveMenu  account                   gt              Account Statement            lt  a gt           lt  LInk gt    lt   gt

User · Answer

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          lt div className  navbar  gt           lt ul gt             lt li gt  lt NavLink to   1  activeClassName  active  gt 1 lt  NavLink gt  lt  li gt             lt li gt  lt NavLink to   2  activeClassName  active  gt 2 lt  NavLink gt  lt  li gt             lt li gt  lt NavLink to   3  activeClassName  active  gt 3 lt  NavLink gt  lt  li gt           lt  ul gt         lt  div gt                 Then in your CSS file    navbar li gt  active     font-weight  bold      The NavLink will add your custom styling attributes to the rendered element based on the current URL   Document is here

User · Answer

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                lt li className  className  gt                   lt Link     this props   gt               lt  li gt                      NavLink contextTypes         router  React PropTypes object     export default NavLink    Then use it as described above

User · Answer

Expanding on  BaiJiFeiLong s answer  add an active    property to the link    lt Nav Link as  Link  to   user  active  pathname startsWith   user    gt User lt  Nav Link gt    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            lt Navbar variant  dark  expand  sm  bg  black  gt               lt Navbar Brand as  Link  to     gt                  Brand name              lt  Navbar Brand gt               lt Navbar Toggle aria-controls  basic-navbar-nav    gt               lt Navbar Collapse id  basic-navbar-nav  gt                   lt Nav className  mr-auto  gt                       lt Nav Link as  Link  to   user  active  pathname startsWith   user    gt User lt  Nav Link gt                       lt Nav Link as  Link  to   about  active  pathname startsWith   about    gt About lt  Nav Link gt                   lt  Nav gt               lt  Navbar Collapse gt           lt  Navbar gt           export default withRouter Header       updates on every new page

User · Answer

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    lt div gt         lt ul className  nav navbar-nav navbar-right  gt           lt li className  homeClass  gt  lt Link to     gt Home lt  Link gt  lt  li gt           lt li className  aboutClass  gt  lt Link to  about  activeClassName  active  gt About lt  Link gt  lt  li gt           lt li className  contactClass  gt  lt Link to  contact  activeClassName  active  gt Contact lt  Link gt  lt  li gt         lt  ul gt    lt  div gt

User · Answer

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               lt Link className  className      this props  gt                   this props children               lt  Link gt                      NavLink contextTypes         router  PropTypes object     export default NavLink    And use it as given below in your component       import NavLink from    nav link           lt nav gt       lt ul className  nav nav-pills pull-right  gt           lt NavLink to     gt               lt i className  glyphicon glyphicon-home  gt  lt  i gt   lt span gt Home lt  span gt           lt  NavLink gt           lt NavLink to  about  gt               lt i className  glyphicon glyphicon-camera  gt  lt  i gt   lt span gt About lt  span gt           lt  NavLink gt       lt  ul gt   lt  nav gt

User · Answer

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   lt NavLink to  quot   quot  activeClassName  quot active quot  gt   Home  lt  NavLink gt    lt NavLink to  quot  store quot  activeClassName  quot active quot  gt   Store  lt  NavLink gt    lt NavLink to  quot  about quot  activeClassName  quot active quot  gt   About Us  lt  NavLink gt    Style your class in the css by the property active   active    color  fcfcfc

User · Answer

x000D   x000D  import React from  react   x000D  import  withRouter  Link  from  react-router-dom   x000D   x000D  const SidenavItems    props    gt    x000D                                          create simple list of links x000D      const items     x000D            x000D              type   navItem   x000D              icon   home   x000D              text   Home   x000D              link       x000D              restricted  false x000D             x000D            x000D              type   navItem   x000D              icon   user-circle   x000D              text   My Profile   x000D              link    user   x000D              restricted  false x000D             x000D            x000D              type   navItem   x000D              icon   sign-in   x000D              text   Login   x000D              link    login   x000D              restricted  false x000D             x000D         x000D   x000D      const element    item  i    gt        create elements  Links  x000D                             check if this is a current link on browser x000D          let active       x000D   x000D          if  props location pathname     item link    x000D              active    active   x000D            x000D   x000D          return   x000D               lt div key  i  className  item type  gt  x000D                   lt Link x000D                      to  item link  x000D                      className  active     className will be set to  active   x000D                   gt                          or    x000D                       item text  x000D                   lt  Link gt  x000D               lt  div gt  x000D            x000D         x000D   x000D      const showItems        gt           print elements x000D          return items map  item  i    gt    x000D              return element item  i  x000D             x000D         x000D   x000D      return   x000D           lt div gt  x000D               showItems        print all the links we created in list x000D           lt  div gt  x000D        x000D     x000D  export default withRouter SidenavItems   x000D   x000D   x000D

User · Answer

You can actually replicate what is inside NavLink something like this  const NavLink         to    exact    children       gt       const navLink     match     gt         return          lt li class   active  match   gt           lt Link to  to  gt             children           lt  Link gt         lt  li gt                return        lt Route       path  typeof to      object    to pathname   to        exact  exact        strict  false        children  navLink        gt          just look into NavLink source code and remove parts you don t need

User · Answer

To set class on the active navigation element  import   NavLink   from  react-router-dom     amp    lt NavLink to   Home  activeClassName  active  gt Home lt  NavLink gt

User · Answer

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    lt li className  link-wrapper  gt    lt  -- add a class to the wrapper -- gt     lt Link to  something  activeClassName  active  gt Something lt  Link gt   lt  li gt    And then just add some css   li link-wrapper  gt  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

User · Answer

Since router v4 I am using  refs  for setting the parent active class    lt ul gt     lt li gt       lt NavLink       innerRef  setParentAsActive        activeClassName  is-active        to  link       gt       text     lt  NavLink gt   lt  ul gt    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   lt li gt   to have the same class     const setParentAsActive   node   gt        if  node          node parentNode className   node className               Drawbacks     lt a gt  will have unnecessary is-active class  as you only need it for  lt li gt    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

User · Answer

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

User · Answer

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  lt li class  nav-item  gt  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      gt      let classes     nav-item      if  isActive  classes push  active       return        lt li className  classes join       gt         lt Link className  nav-link  to  to  gt           label         lt  Link gt       lt  li gt           export default withRouter    location     props      gt      const isActive   location pathname     props to     console log location pathname  props to      return  lt NavItem     props  isActive  isActive    gt         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

User · Answer

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  quot react quot       import   NavLink  from  quot react-router-dom quot        function nav                const isActive                 fontWeight   quot bold quot               backgroundColor   quot rgba 255  255  255  0 1  quot                         return              lt ul className  quot navbar-nav mr-auto quot  gt               lt li className  quot nav-item quot  gt                 lt NavLink className  quot nav-link quot  to  quot  Shop quot  activeStyle  isActive  gt                  Shop                lt  NavLink gt               lt  li gt             lt  ul gt                    export default nav

User · Answer

Its very easy to do that  react-router-dom provides all    x000D   x000D  import React from  react   x000D  import   matchPath  withRouter   from  react-router   x000D       x000D  class NavBar extends React Component   x000D    render    x000D      return  x000D          lt ul className  sidebar-menu  gt  x000D         lt li className  header  gt MAIN NAVIGATION lt  li gt  x000D         lt li className  matchPath this props location pathname    path    dashboard        active        gt  lt Link to  dashboard  gt  lt i className  fa fa-dashboard  gt  lt  i gt   x000D           lt span gt Dashboard lt  span gt  lt  Link gt  lt  li gt  x000D         lt li className  matchPath this props location pathname    path    email lists        active        gt  lt Link to  email lists  gt  lt i className  fa fa-envelope-o  gt  lt  i gt   x000D           lt span gt Email Lists lt  span gt  lt  Link gt  lt  li gt  x000D         lt li className  matchPath this props location pathname    path    billing        active        gt  lt Link to  billing  gt  lt i className  fa fa-credit-card  gt  lt  i gt   x000D           lt span gt Buy Verifications lt  span gt  lt  Link gt  lt  li gt  x000D       lt  ul gt  x000D          x000D       x000D    x000D       x000D  export default withRouter NavBar   x000D   x000D   x000D    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

User · Answer

Just use NavLink rather than Link  It will add  active class automatically    lt Nav className  mr-auto  gt       lt Nav Link as  NavLink  to   home  gt Home lt  Nav Link gt       lt Nav Link as  NavLink  to   users  gt Users lt  Nav Link gt   lt  Nav gt

[react-router] How do I add an active class to a Link from React Router?

One of the way you can use it

Examples related to react-router