NextJS:Functions:useRouter
lastmod 2024-01-09created 2024-01-093 edits
The useRouter hook allows you to programmatically change routes inside Client Components.
Usage
'use client'
import { useRouter } from 'next/navigation'
export default function Page() {
const router = useRouter()
return (
<button type="button" onClick={() => router.push('/dashboard')}>
Dashboard
</button>
)
}
Methods
-
router.push(href: string, { scroll: boolean }) - Perform a client-side navigation to the provided route. Adds a new entry into the browser’s history stack.
-
router.replace(href: string, { scroll: boolean }) - Perform a client-side navigation to the provided route without adding a new entry into the browser’s history stack.
-
router.refresh() - Refresh the current route. Making a new request to the server, re-fetching data requests, and re-rendering Server Components. The client will merge the updated React Server Component payload without losing unaffected client-side React (e.g. useState) or browser state (e.g. scroll position).
-
router.prefetch(href: string) - Prefetch the provided route for faster client-side transitions.
-
router.back() - Navigate back to the previous route in the browser’s history stack.
-
router.forward() - Navigate forwards to the next page in the browser’s history stack.