Define Active Links

tsximport React from "react";
import { Link, useLocation } from "rasengan";
 
type Props = {
  to: string;
  children: React.ReactNode;
};
 
export default function ActiveLink({ to, children }: Props) {
  const { pathname } = useLocation();
 
  return (
    <Link to={to} className={`${pathname === to ? "active" : ""}`}>
      {children}
    </Link>
  );
}

tsximport React from "react";
import { NavLink } from "rasengan";
 
type Props = {
  to: string;
  children: React.ReactNode;
};
 
export default function ActiveLink({ to, children }: Props) {
  return (
    <NavLink 
      to={to} 
      className={({ isActive, isPending }) =>
        isPending ? "pending" : isActive ? "active" : ""
      }
    >
      {children}
    </NavLink>
  );
}

txtWhen to="/docs"
 
Current route: /docs => isActive: true
Current route: /docs/getting-started/introduction => isActive: true
Current route: /packages => isActive: false
Current route: /blog => isActive: false

tsx<NavLink to="/tasks">
  {({ isActive }) => (
    <span className={isActive ? "active" : ""}>Tasks</span>
  )}
</NavLink>