useRouter

Docs

useRouter

useRouter is a hook that can be used to manipulate with router

Tip: Use created <Link /> component for navigation unless you have a specific requirement for using useRouter.

useRouter return's following object

interface Router {
	pathname: string
	push: (pathname: string) => void
	replace: (pathname: string) => void
	refresh: () => void
	back: () => void
	forward: () => void
}

router.pathname: Current URL's pathname
router.push(pathname: string): Pushes new state to browser history API
router.replace(pathname: string): Replaces browser history state with new one
router.refresh(): Refresh the current route.
router.back(): Navigate back to the previous route in the browser’s history stack.
router.forward(): Navigate forward to the next route in the browser’s history stack.

Example

import { useRouter } from "another-react-router"
import { Breadcrumbs } from "@/components/ui/breadcrumbs"
import { Button } from "@/components/ui/button"
 
function Navigation() {
	const router = useRouter()
 
	return (
		<nav className="navigation">
			<Breadcrumbs pathname={router.pathname} />
			<Button onClick={() => router.push("/home")}>Home</Button>
			<Button onClick={() => router.push("/about")}>About</Button>
			<Button onClick={() => router.push("/contact")}>Contact</Button>
			<Button onClick={() => router.back()}>Back</Button>
			<Button onClick={() => router.forward()}>Forward</Button>
			<Button onClick={() => router.refresh()}>Refresh</Button>
		</nav>
	)
}

Link usePathname