useRouterThe useRouter hook allows you to programmatically change routes inside Client Components.
Recommendation: Use the <Link> component for navigation unless you have a specific requirement for using useRouter.
app/example-client-component.tsx 'use client'
 
import { useRouter } from 'next/navigation'
 
export default function Page() {
  const router = useRouter()
 
  return (
    <button type="button" onClick={() => router.push('/dashboard')}>
      Dashboard
    </button>
  )
}
useRouter()
router.push(href: string): Perform a client-side navigation to the provided route. Adds a new entry into the browser’s history stack.
router.replace(href: string): Perform a client-side navigation to the provided route without adding a new entry into the browser’s history stack.