Navigation Components in React

import { Link, NavLink, useNavigate, Navigate } from 'react-router'

// Basic navigation
<Link to="/about">About</Link>
<Link to="/users/123">User Profile</Link>
<Link to=".." relative="path">Go Up</Link>

// NavLink with active styles
<NavLink
  to="/tasks"
  className={({ isActive, isPending }) =>
    isActive ? "active" : isPending ? "pending" : ""
  }
>
  Tasks
</NavLink>

// Programmatic navigation
function LoginForm() {
  const navigate = useNavigate()

  const handleSubmit = async (e) => {
    e.preventDefault()
    await login()
    navigate("/dashboard", { replace: true })
  }

  return <form onSubmit={handleSubmit}>...</form>
}