@remix-run/router: Add support for navigation blocking (#9709)

* feat(router): add support for history blocking APIs * feat(react-router): add `unstable_useBlocker` hook * feat(react-router-dom): add `capture` option to `useBeforeUnload` Co-authored-by: Matt Brophy <matt@brophy.org>
remix-run · Jan 13, 2023 · bb7590a · bb7590a
1 parent 9640d01
commit bb7590a
Show file tree

Hide file tree

Showing 31 changed files with 4,622 additions and 31 deletions.
diff --git a/.changeset/lazy-needles-shout.md b/.changeset/lazy-needles-shout.md
@@ -0,0 +1,5 @@
+---
+"react-router-dom": patch
+---
+
+Added pass-through event listener options argument to `useBeforeUnload`
diff --git a/.changeset/light-phones-impress.md b/.changeset/light-phones-impress.md
@@ -0,0 +1,5 @@
+---
+"@remix-run/router": minor
+---
+
+Added support for navigation blocking APIs
diff --git a/.changeset/violet-timers-type.md b/.changeset/violet-timers-type.md
@@ -0,0 +1,5 @@
+---
+"react-router-dom": minor
+---
+
+Add `unstable_useBlocker` hook for blocking navigations within the app's location origin
diff --git a/.gitignore b/.gitignore
@@ -22,4 +22,5 @@ node_modules/
 /packages/react-router-dom-v5-compat/react-router-dom
 
 .eslintcache
-/.env
+/.env
+/NOTES.md
diff --git a/examples/navigation-blocking/.gitignore b/examples/navigation-blocking/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
diff --git a/examples/navigation-blocking/.stackblitzrc b/examples/navigation-blocking/.stackblitzrc
@@ -0,0 +1,4 @@
+{
+  "installDependencies": true,
+  "startCommand": "npm run dev"
+}
diff --git a/examples/navigation-blocking/README.md b/examples/navigation-blocking/README.md
@@ -0,0 +1,15 @@
+---
+title: Navigation Blocking
+toc: false
+order: 1
+---
+
+# Navigation Blocking
+
+This example demonstrates using `unstable_useBlocker` to prevent navigating away from a page where you might lose user-entered form data. A potentially better UX for this is storing user-entered information in `sessionStorage` and pre-populating the form on return.
+
+## Preview
+
+Open this example on [StackBlitz](https://stackblitz.com):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/remix-run/react-router/tree/main/examples/navigation-blocking?file=src/App.tsx)
diff --git a/examples/navigation-blocking/index.html b/examples/navigation-blocking/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React Router - Navigation Blocking</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>