Background

Leave page prompt in desktop Chrome

Leave page prompt in Android Chrome

• Product managers often want the UI of this popup prompt to be customizable. From the screenshots, the browser's default popup can't be called good-looking. But most importantly, the browser's popup prompt currently does not support displaying custom text.
• For single-page applications,beforeunload it cannot take effect during frontend route navigation.

React Router's <Prompt />

<Prompt
  when={isBlocking}
  message={location =>
    `Are you sure you want to go to ${location.pathname}`
  }
/>

import React, { useState } from "react";
import ReactDOM from "react-dom";
import {
  BrowserRouter as Router,
  Route,
  Switch,
  Link,
  Prompt
} from "react-router-dom";

function Home() {
  const [value, setValue] = useState("");
  return (
    <div>
      <Prompt when={!!value} message="are you sure?" />
      <input value={value} onChange={e => setValue(e.target.value)} />
    </div>
  );
}

function About() {
  return <div>About</div>;
}

function Nav() {
  return (
    <div>
      <Link to="/">home</Link>
      <Link to="/about">About</Link>
    </div>
  );
}

function getUserConfirmation(message, callback) {
  const el = document.querySelector("#confirm");
  function decide(result) {
    callback(result);
    ReactDOM.unmountComponentAtNode(el);
  }
  function ConfirmModal() {
    return (
      <div>
        <p>{message}</p>
        <button onClick={() => decide(false)}>cancel</button>
        <button onClick={() => decide(true)}>ok</button>
      </div>
    );
  }

  ReactDOM.render(<ConfirmModal />, el);
}

export default function App() {
  return (
    <div className="App">
      <Router getUserConfirmation={getUserConfirmation}>
        <Nav />
        <Switch>
          <Route path="/" exact>
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
        </Switch>
      </Router>
    </div>
  );
}

Behind the Magic

1. During the React Router initialization phase, the history library's listener is set up
2. During the initial phase, as well as when the history listener callback is triggered, React Router sets the internal Context values, causing child components that depend on these Context values to re-render.
3. We used in the page <Prompt /> component, so that the private prompt variable inside the history library is not empty
4. When we enter content on the Home page and click a link to another page, or click the browser's back button, the history library's internal transitionManager receives the request to switch pages, and executes the transitionManager.confirmTransitionTo method to determine whether the page can be switched
5. Inside the confirmTransitionTo method, if it determines that prompt is not empty, then it will call the getUserConfirmation method
6. The getUserConfirmation we passed in will render a confirmation dialog in the DOM, so the page will display a confirmation dialog, and if the user does not take further action, the page will not change
7. When the user clicks OK or Cancel, it will call the getUserConfirmation callback and pass in the result
8. getUserConfirmation callback is actually the transitionManager.confirmTransitionTo anonymous function passed in, and when this function receives the result, it then determines based on the result whether to update the history state
9. If the state is updated, then it triggers the history.listen listener callback; if there is no update, it does not trigger it, and attempts to restore the current page URL to the previous URL
10. history.listen After the callback is triggered, it also triggers React Router's state update, which in turn causes its child components to update, such as the Route component, and at this point the page switch occurs

Summary