1

I'm using Next.js for my application and I'm facing some issues on routing to the previous route of the application. I'm aware of the router function back() which is similar to window.history.back(), I would like to go back to the route when a Link is clicked, and if the previous link isn't from my application or is null, I would like to go to the home page as a default.

I used libraries like react-router-last-location for my react app, but I wanna see if there are better ways to do it in Next.js via next/router.

Here is my sample code:

<div className={styles['icon-container']}>
  <Link  href="/"><a>
      <img src="icon.svg"></img>
  </a></Link>
</div>

if i use router.back() in the href input, the page goes back automatically even before it loads, how do i solve this issue?

Rubens Mariuzzo
  • 28,358
  • 27
  • 121
  • 148
Aadhit Shanmugam
  • 433
  • 1
  • 10
  • 23
  • Could you add some more information about the use case, i.e. why you want to do this. This will help people give more rounded answers. :) – Per Enström Jun 16 '21 at 08:47
  • I don't understand your use case and/or requirements, but I think hijacking the back navigation to keep users in your app is a rather poor UX. I'd like to think I'm not alone in thinking if I accidentally navigated into your webapp and immediately try to back out and continually bounce to your homepage that I'll never want to visit again. – Drew Reese Jun 16 '21 at 09:04
  • No i'm not hijacking the back navigation! This is a custom back button which will be present in my site so that they can view a post and go back to the feed! – Aadhit Shanmugam Jun 16 '21 at 11:25

1 Answers1

10

<Link> can't go outside of your app. (but router.back() can)

You can't use router.back() directly in the code, you need to do something like :

<img onClick={router.back} src="icon.svg" />

<Link> does not have onClick property.

import { useRouter } from 'next/router'

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

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

Source of info here

zeckdude
  • 15,877
  • 43
  • 139
  • 187
ChilTest
  • 461
  • 5
  • 18
  • 2
    How does this code prevent back navigation out of the app and redirect to home page instead? – Drew Reese Jun 16 '21 at 08:59
  • Don't really know, with Router you can't do this. You need to check .sessionStorage or .localstorage – ChilTest Jun 16 '21 at 09:17
  • @DrewReese You can use solution outlined here https://github.com/vercel/next.js/discussions/36723 – justdvl Nov 21 '22 at 17:15
  • @justdvl Perhaps your comment would be better directed to ChiTest since this is their answer that doesn't appear to explain how to prevent navigation out of the app. I'm actually surprised this answer is accepted and got 8 upvotes for some reason. Perhaps the question really was just about effecting a regular vanilla back navigation. – Drew Reese Nov 21 '22 at 17:20
  • https://nextjs.org/docs/api-reference/next/router#routerback – felipe muner Nov 28 '22 at 21:25