What are the considerations for handling active links and styling them appropriately in React Router

Question

Can you tell me What are the considerations for handling active links and styling them appropriately in React Router?

Answer 1

Using NavLink :

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

function Navigation() {

  return (

    <nav>

      <NavLink

        to="/dashboard"

        className={({ isActive }) => 

          isActive ? 'text-blue-600 font-bold' : 'text-gray-600'

        }

        style={({ isActive }) => ({

          borderBottom: isActive ? '2px solid currentColor' : 'none'

        })}

        end  // Ensures exact matching

      >

        Dashboard

      </NavLink>

    </nav>

  );

}