CODEWITHSUNDEEP
reactjsnext.js
Дмитрий
Дмитрий

Reputation: 1129

Go back to the previous page

I am use routing in next.js. How to implement a back button that navigates back to the previous page? Just like with the button on the browser.

Upvotes: 104

Views: 206322

Answers (5)

Clément Prévost
Clément Prévost

Reputation: 8630

UPDATE: useRouter is used in two different functions

  • Page Router: useRouter is imported from next/router, used in functional components.
  • App Router: useRouter is imported from next/navigation, used in client components.

useRouter migration: see docs

EDIT: 2 years after this answer was first posted, the router method is now well documented. Here is the code straight from the documentation:

import { useRouter } from 'next/navigation'  // Usage: App router
// Either
import { useRouter } from 'next/router'  // Usage: Page router

export default function Page() {
  const router = useRouter()

  return (
    <button type="button" onClick={() => router.back()}>
      Click here to go back
    </button>
  )
}

ORIGINAL ANSWER:

There is an undocumented Router.back method (see source) that just does window.history.back()

You should have a component like so

import Router from 'next/router'

export default function BackButton() {
    return (
        <div onClick={() => Router.back()}>Go Back</div>
    )
}

Upvotes: 198

musaa muhsen
musaa muhsen

Reputation: 81

If you are looking to go back using the web browser native/default back button probably best to look into "window.onpopstate" with something like this -

      const handlePopState = useCallback(() => {
        router.push(/*route logic here*/);
      }, [router]);

      useEffect(() => {
        window.addEventListener('popstate', handlePopState);
        
        // Clean up event listener
        return () => window.removeEventListener('popstate', handlePopState);
      }, [handlePopState])

More detail on this page - Want to have an event handler for the browser's back button with next.js

Upvotes: 8

victorcesae
victorcesae

Reputation: 29

I think a better solution will be something like

"use client";

import { usePathname } from "next/navigation";
import Link from "next/link";

interface Props {
  title: string;
}

const Header = ({ title }: Props) => {
  const pathname = usePathname();
  const finalSlashIndex = pathname.lastIndexOf('/')
  const previousPathname = pathname.slice(0, finalSlashIndex)
  return (
    <div className="flex bg-brand-normal py-1 px-3">
      <Link href={previousPathname}>
        Back
      </Link>
      <div className="grow text-center">
        <h2 className="text-slate-50">{title}</h2>
      </div>
    </div>
  );
};

export default Header;

Upvotes: 0

Mahmud Ahsan
Mahmud Ahsan

Reputation: 2055

This will work. If you use Next > 13 version app router, make sure you import the useRouter from next/navigation

"use client";

import { useRouter } from "next/navigation";

interface Props {
  title: string;
}

const Header = ({ title }: Props) => {
  const router = useRouter();
  return (
    <div className="flex bg-brand-normal py-1 px-3">
      <button onClick={() => router.back()}>
        Back
      </button>
      <div className="grow text-center">
        <h2 className="text-slate-50">{title}</h2>
      </div>
    </div>
  );
};

export default Header;

Upvotes: 3

Isi Doro
Isi Doro

Reputation: 61

You can try with this

const router = useRouter()
const finalSlashIndex = router.asPath.lastIndexOf('/')
const previousPath = router.asPath.slice(0, finalSlashIndex)
return <Link href={previousPath}>Go back</Link>

Upvotes: 4

Related Questions