How would you use NavLink to style active navigation links in a React application

Question

With the help of code and examples can you tell me How would you use NavLink to style active navigation links in a React application?

Answer 1

You can use the <NavLink> component to style active navigation links.

Implementation

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

const Navbar = () => {

  return (

    <nav>

      <NavLink to="/" className={({ isActive }) => isActive ? "active-link" : ""}>New</NavLink>

      <NavLink to="/about" className={({ isActive }) => isActive ? "active-link" : ""}>Home</NavLink>

    </nav>

  );

};

export default Navbar;

CSS Styling

.active-link {

  font-weight: bold;

  color: red;

}