The useRouter is a hook in Next.js providing programmatic navigation and access to the current route's data. Calling the hook returns an object. From the object you can get access to
- current path name (pathname)
- query parameter (query)
- with push, replace, and other methods, able to navigate between pages/components
- can control browser history with back, reload, and other methods.
👉 How to use useRouter hook
First, import from the correct packages.
import { useRouter } from 'next/navigation'
NB: next/router is deprecated in Next.js 15.
Since useRouter is a client-side hook, you have to use "use client" at the top of the file.
useRouter hook returns an object of
pushbackforwardrefreshreplace
prefetchand
hmrRefreshmethods
Let's describe one by one.
👉 push
It is used to navigate new routes programmatically. It adds a new browser history to the stack. Its syntax is router.push(href, options?). Providing an option is not mandatory.
NB: To know more about optoins read the article. Link props are similar to options
Know more about option or Link props
"use client";
import { useRouter } from "next/navigation";
const AboutPage = () => {
const router = useRouter();
const aboutRouteHandler = () => {
router.push('/about');
}
const contactRouteHandler = () => {
router.push('/contactus', {scroll: false});
}
return (
<div className="space-y-8">
<div>
{/* Without option */}
<button className="px-3 py-2 bg-blue-600 text-white rounded-md" onClick={aboutRouteHandler}>
Go to About Page
</button>
</div>
<div>
{/* With option */}
<button className="px-3 py-2 bg-blue-600 text-white rounded-md"
onClick={contactRouteHandler}>
Go to Contact us Page
</button>
</div>
</div>
);
};
export default AboutPage;
Users can navigate new page, keeping the option to go back to the previous page.
👉 replace
It updates the current history entry and removes the previous entry. Syntax: router.replace(href, options?)
"use client";
import { useRouter } from "next/navigation";
const AboutPage = () => {
const router = useRouter();
const aboutRouteHandler = () => {
router.replace('/about');
}
const contactRouteHandler = () => {
router.replace('/contactus', {scroll: false});
}
return (
<div className="space-y-8">
<div>
{/* Without option */}
<button className="px-3 py-2 bg-blue-600 text-white rounded-md" onClick={aboutRouteHandler}>
Go to About Page
</button>
</div>
<div>
{/* With option */}
<button className="px-3 py-2 bg-blue-600 text-white rounded-md"
onClick={contactRouteHandler}>
Go to Contact us Page
</button>
</div>
</div>
);
};
export default AboutPage;
For using replace method, users are not able to go back to the previous page.
--Where to use:--
After login, form submission users will be redirected to another page. And going back to the login, form page does not make sense.
👉 refresh
refresh the current page without affecting the browsing history. It is used to update and reflect the latest state. It re-fetched data and the server component. Syntax: router.refresh()
"use client";
import { useRouter } from "next/navigation";
const AboutPage = () => {
const router = useRouter();
const aboutRouteHandler = () => {
router.refresh();
}
return (
<div className="space-y-8">
<div>
{/* Without option */}
<button className="px-3 py-2 bg-blue-600 text-white rounded-md" onClick={aboutRouteHandler}>
Go to About Page
</button>
</div>
</div>
);
};
export default AboutPage;
👉 prefetch
prefetch cached JS, data, and segment for the specific routes. So that, for the next click, the page can be loaded immediately. Syntax: router.prefetch(href)
'use client';
import { useEffect } from 'react';
import { useRouter } from 'next/navigation';
export default function AboutPage() {
const router = useRouter();
useEffect(() => {
// যখন AboutPage কম্পোনেন্ট মাউন্ট হবে তখনই প্রিফেচ
router.prefetch('/contactus');
router.prefetch('/help');
}, [router]);
const handleGo = (path) => {
router.push(path);
};
return (
<div className="space-y-4">
<button
className="px-3 py-2 bg-green-600 text-white rounded-md"
onClick={() => handleGo('/contactus')}
>
Go to Contact Us
</button>
<button
className="px-3 py-2 bg-indigo-600 text-white rounded-md"
onClick={() => handleGo('/help')}
>
Get Help
</button>
</div>
);
}
Those pages will be pre-loaded when using useEffect().
_Or we can combine push and prefetch altogether
'use client';
import { useRouter } from 'next/navigation';
export default function AboutPage() {
const router = useRouter();
const handleMouseEnter = () => {
router.prefetch('/contactus'); // Contactus
};
const handleClick = () => {
router.push('/contactus'); /
};
return (
<div className="space-y-8">
<button
className="px-3 py-2 bg-blue-600 text-white rounded-md"
onMouseEnter={handleMouseEnter}
onClick={handleClick}
>
Go to Contact Us
</button>
</div>
);
}
When mouse enters the button the component get loaded in background. For push method user redirected to the page immediately.
👉 back
back method allows users to go back a step in history.
"use client";
import { useRouter } from "next/navigation";
const AboutPage = () => {
const router = useRouter();
const returnPageHandler = () => {
router.back();
}
return (
<div className="space-y-8">
<div>
<button className="px-3 py-2 bg-blue-600 text-white rounded-md" onClick={returnPageHandler}>
Back to Previous Page
</button>
</div>
</div>
);
};
export default AboutPage;
👉 forward
forward works the same way as the back method does. But goes one step forward from history.
"use client";
import { useRouter } from "next/navigation";
const AboutPage = () => {
const router = useRouter();
const nextPageHandler = () => {
router.forward();
}
return (
<div className="space-y-8">
<div>
<button className="px-3 py-2 bg-blue-600 text-white rounded-md" onClick={nextPageHandler}>
Go to Next Page
</button>
</div>
</div>
);
};
export default AboutPage;
👉 hmrRefresh()
It works only in development mode. Without reloading the page fully, it refreshes the page's data.