React Router Dom V6 - Hover Styles on Active Nav

React Router Dom v6 - hover styles on active nav

Move the "style" logic to the className prop and add the "active" class. The inline style attribute adds higher CSS specificity and overrides styles defined in your CSS.

<NavLink
  to="/games"
  className={({ isActive }) =>
    ["nav-link", isActive ? "active" : null]
      .filter(Boolean)
      .join(" ")
  }
>
  <img src={require('../../assets/icons/gamesIcon.png')} id='projects-icon' />
  Games
</NavLink>

CSS

.nav-link {
  text-decoration: none;
  background-color: white;
  color: #0E1333;
  font-family: 'Gilroy-ExtraBold';
  font-size: 18px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding-left: 25px;
  padding-right: 25px;
}

.nav-link:hover, .active:hover {
  background-color: #0E1333;
  color: #fff;
}

.active {
  color: #0E1333;
  border-bottom: solid 2.5px #0E1333;
  padding-bottom: 2.5rem;
}

Note the the NavLink component already adds an "active" classname by default, so the link logic can be simplified to:

<NavLink to="/games" className="nav-link">
  <img src={require('../../assets/icons/gamesIcon.png')} id='projects-icon' />
  Games
</NavLink>

add style to navigation menu only to a active page is not working as expected in react router v6

after reading the docs properly for some time i figured out by adding end prop to the NavLink will easily resolve this issue!

this end prop will ensure this component isn't matched as "active" when its descendant paths are matched.

const TabLink:React.FC<Props> = (props) => {
const { link, label } = props;
return (
 <NavLink
  end
  to={link}
  className={
  ({ isActive }) => (isActive
    ? 'text-cyan-400 border-b-4 border-current'
    : '')
  }
>
  <h6 className="hover:border-b-4 h-10 px-6 border-current hover:text-cyan-300">
    {label}
  </h6>
</NavLink>
);
};

How can I add hover effect on react-router custom link?

Do not style them through the style property, as that has higher specificity than any css rule (unless you resort to !important).

Just add a class to signify that it is active.

    const CustomLink = ({ children, to, ...props }) => {
        let resolved = useResolvedPath(to);
        let match = useMatch({ path: resolved.pathname, end: true });
        const linkClassNames = match ? 'active' : '';
        return (
            <div className=`nav-link ${linkClassNames}`>
                <Link
                    to={to}
                    {...props}
                >
                    {children}
                </Link>
            </div>
        );
    };
    
    export default CustomLink;

.nav-link a {
  text-decoration: none;
  color: white;
  font-weight: 400;
}

.nav-link.active a {
  text-decoration: underline;
  color: #FDC300;
  font-weight: 500;
}

---

You could however use the NavLink component (provided by the react router) which supports this

<NavLink
  to="wherever you want"
  className={({ isActive }) =>
    isActive ? 'nav-link active' : 'nav-link'
  }
>
   your link text here
</NavLink>

NavLink react-router-dom components :hover not working

You can't and even shouldn't put pseudo-classes inline. Put css in class and then apply it by className like in example below:

JSX:

<NavLink to="/example" className="nav_link">Example</NavLink>

CSS

.nav {
  //other styles
  //...
  a.nav_link:hover {
  cursor: pointer;
  color: red; 
  }
}

Example

How to add an active class to an active Link in react router dom v6.3 using styled components - ReactJs ^18.1.0

NavLink has a default class for active routue. Simply go to your index.css/app.css and add a class name (.active) and give your styles. If you are using tailwind then simply add this style.

@tailwind components;

.active {
  @apply border-b-2 border-[#888888] no-underline font-bold text-[#888888];
}

react-router-dom v6 NavLink is always active

Turns out I had to deconstruct the property of className as ternary operator always returned true for objects

    <NavLink
          className={({isActive}) => //(isActive) --> ({isActive})
            cx(isActive ? classes.linkActive : classes.link)
          }
          to="/seafarers"
          end
        >
          Seafarers
        </NavLink>

I was unable to style the active route in React using react-router

you may use activeStyle class in your <NavLink/> Tag:-

import React from 'react';
import classes from './navBar.module.css';
import {NavLink} from 'react-router-dom'

const NavBar = (props) => {
   const style = {
        color: 'black',
        fontWeight: 'bold'
    }
    return (
        <div className={classes.navBarStyle}>
            <p className={classes.navBarTitle}>EMPOYEE DATABASE</p>
            <nav className={classes.nav}>
               <ul className = {classes.navUl}>
                   <li><NavLink activeStyle={style} to="/" exact>HOME</NavLink> 
                   </li>
                <li><NavLink activeStyle={style} to="/addEmployee" >ADD</NavLink></li>
               </ul>
            </nav>
        </div>
    )
}

export default NavBar;

isActive style in react-router v.6

In react-router-dom v6 the isActive is a prop value destructured from a function passed to either of the children, className, and style NavLink props.

NavLink

interface NavLinkProps
  extends Omit<
    LinkProps,
    "className" | "style" | "children"
  > {
  caseSensitive?: boolean;
  children?:
    | React.ReactNode
    | ((props: { isActive: boolean }) => React.ReactNode);
  className?:
    | string
    | ((props: { isActive: boolean }) => string);
  end?: boolean;
  style?:
    | React.CSSProperties
    | ((props: {
        isActive: boolean;
      }) => React.CSSProperties);
}

Destructure isActive in your style callback, style={({ isActive }) => ({ color: isActive ? "green" : "blue" })}.

<NavLink
  to="/profile"
  style={({ isActive }) => ({ color: isActive ? "green" : "blue" })}
  className={s.navItems}
>
  Profile
</NavLink>

---

Related Topics