How to handle a back button click in a SPA?

Question

I'm developing a SPA with NextJS, and it's made out of exclusively one page. There's not next/link or Router usage whatsoever. The user would visit the page and everything would happen within the DOM, including all button click, view navigations, etc.

The problem that I'm facing right now, is that if the user at any point clicks the back button.. well, they'll leave the site.

I'd love to hear any suggestions that anyone has regarding this.

Lots of client side SPA's use hash based routing, which gives you some immunity from the default browser history by default. — DBS, Aug 26 '20 at 14:30
In your site if your users habitually reach for the back button, then it would be best for the user experience to use client side routing — Kenny John Jacob, Aug 26 '20 at 14:37
@KennyJohnJacob Yeah, I usually code with CSR, was looking to learn something new with Nextjs — Mike K, Aug 26 '20 at 15:19
If you’re using next.js without next.js routing, there’s no point in using next.js. — Bertrand Marron, Aug 26 '20 at 18:05

score 0 · Answer 1 · answered Aug 26 '20 at 14:36

0

The beforeunload can help you.

Example:

window.onbeforeunload = function(){
  return ''
}

answered Aug 26 '20 at 14:36

Houston da Paz

11
4

Some error is throw? If the problem is the `window is not defined` see [this question](https://stackoverflow.com/questions/55151041/window-is-not-defined-in-next-js-react-app) – Houston da Paz Aug 26 '20 at 17:47

How to handle a back button click in a SPA?

1 Answers1