DEV Community

Cover image for useRouter in Next.js
Khan Rabiul
Khan Rabiul

Posted on

useRouter in Next.js

#webdev #nextjs #frontend #userouter

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'
Enter fullscreen mode Exit fullscreen mode

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

  • push
  • back
  • forward
  • refresh
  • replace
  • prefetch and
  • hmrRefresh methods 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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

👉 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> ); }
Enter fullscreen mode Exit fullscreen mode

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> ); }
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

👉 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;
Enter fullscreen mode Exit fullscreen mode

👉 hmrRefresh()

It works only in development mode. Without reloading the page fully, it refreshes the page's data.

Top comments (0)