Detecting user leaving page with react-router

Building dynamic web applications with React often involves managing user state and preventing accidental data loss. One critical aspect of a robust user experience is accurately detecting user leaving page with React Router. This isn’t merely about knowing when a user clicks a navigation link; it extends to understanding when they attempt to exit the application entirely, refresh the page, or close the browser tab. Without proper handling, users might lose unsaved form data, interrupt ongoing processes, or simply have a frustrating interaction. As developers, our goal is to create seamless and intuitive interfaces, and that includes providing timely warnings to safeguard their progress. This guide will explore the various strategies and tools available within the React Router ecosystem and native browser APIs to effectively manage user departures, ensuring data integrity and a positive user journey.

Understanding User Navigation and Its Challenges

User navigation in a single-page application (SPA) powered by React Router can be complex. There are several ways a user might “leave” a page: internal route changes (e.g., clicking a <Link> component), programmatic navigation (e.g., using history.push), and external exits (e.g., closing the browser tab, refreshing the page, or navigating to an external URL). Each scenario presents unique challenges for intercepting the action and prompting the user, especially when there are unsaved changes or ongoing operations.

The primary concern is data loss. Imagine a user filling out a lengthy form, only to accidentally click a navigation link or hit the back button. Without a warning, all their progress vanishes. This leads to frustration and a poor user experience. Effective detection of user leaving a page with React Router ensures that developers can implement safeguards, such as confirmation dialogs, giving users an opportunity to save their work or confirm their intent to leave.

Beyond data loss, interrupting critical operations like file uploads or complex calculations can also degrade the user experience. By understanding the different navigation types, we can apply the appropriate mechanisms to prevent accidental disruptions and maintain application state integrity. This proactive approach significantly enhances the perceived quality and reliability of a web application.

Leveraging React Router’s Prompt Component (React Router v5 and Earlier)

For applications built with older versions of React Router (v5 and below), the <Prompt> component was the go-to solution for managing navigation within the application. It allowed developers to display a confirmation message to the user whenever they attempted to navigate away from the current route, typically when there were unsaved changes.

The <Prompt> component takes two main props: when and message. The when prop is a boolean that determines if the prompt should be active. If true, the prompt will trigger. The message prop can be a string, which is the message displayed in a browser-native confirmation dialog, or a function that receives the next location and action and returns a string message or true/false to allow/prevent navigation. This flexibility enabled developers to create context-aware warnings.

Here’s how you would typically use it:

import React, { useState } from 'react'; import { Prompt } from 'react-router-dom'; function MyFormPage() { const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false); const [inputValue, setInputValue] = useState(''); const handleChange = (e) => { setInputValue(e.target.value); setHasUnsavedChanges(true); }; const handleSubmit = (e) => { e.preventDefault(); // Save data setHasUnsavedChanges(false); alert('Data saved!'); }; return ( <form onSubmit={handleSubmit}> <Prompt when={hasUnsavedChanges} message="You have unsaved changes. Are you sure you want to leave?" /> <input type="text" value={inputValue} onChange={handleChange} /> <button type="submit">Save</button> <p>{hasUnsavedChanges ? 'Unsaved changes!' : 'All changes saved.'}</p> </form> ); } 

This approach effectively handled internal route changes, ensuring users were prompted before potentially losing data. However, it was limited to React Router’s internal navigation and did not cover full page reloads or tab closures, which require a different browser-level mechanism.

Modern Approach: useBlocker Hook in React Router v6+

With the release of React Router v6, the <Prompt> component was deprecated in favor of a more flexible and powerful hook: useBlocker. This hook provides finer-grained control over navigation blocking and allows for custom blocking UIs, moving beyond the native browser prompt. This is a significant improvement for user experience, as it allows applications to present branded, more informative confirmation dialogs.

To prevent navigation away from a page in React Router v6 when there are unsaved changes, you can utilize the useBlocker hook. This hook provides a way to intercept navigation attempts and execute custom logic or render a specific UI, like a modal, to confirm the user’s intent. Instead of relying on the browser’s generic prompt, useBlocker gives developers full control over the blocking experience, enhancing consistency in application design and improving overall user experience by allowing for richer, context-aware warnings about potential data loss. It’s particularly useful for forms or dynamic content where unsaved user input is a concern.

The useBlocker hook takes a function that returns true if navigation should be blocked, and a callback function that runs when navigation Question & Answer :

I want my ReactJS app to notify a user when navigating away from a specific page. Specifically a popup message that reminds him/her to do an action:

“Changes are saved, but not published yet. Do that now?”

Should i trigger this on react-router globally, or is this something that can be done from within the react page / component?

I havent found anything on the latter, and i’d rather avoid the first. Unless its the norm of course, but that makes me wonder how to do such a thing without having to add code to every other possible page the user can go to..

Any insights welcome, thanks!

react-router v4 introduces a new way to block navigation using Prompt. Just add this to the component that you would like to block:

import { Prompt } from 'react-router' const MyComponent = () => ( <> <Prompt when={shouldBlockNavigation} message='You have unsaved changes, are you sure you want to leave?' /> {/* Component JSX */} </> ) 

This will block any routing, but not page refresh or closing. To block that, you’ll need to add this (updating as needed with the appropriate React lifecycle):

componentDidUpdate = () => { if (shouldBlockNavigation) { window.onbeforeunload = () => true } else { window.onbeforeunload = undefined } } 

onbeforeunload has various support by browsers.