Skip to content

Commit bb7590a

Browse files
chaancebrophdawg11
chaance
and
brophdawg11
authored
@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 <[email protected]>
1 parent 9640d01 commit bb7590a

31 files changed

+4622
-31
lines changed

‎.changeset/lazy-needles-shout.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"react-router-dom": patch
3+
---
4+
5+
Added pass-through event listener options argument to `useBeforeUnload`

‎.changeset/light-phones-impress.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@remix-run/router": minor
3+
---
4+
5+
Added support for navigation blocking APIs

‎.changeset/violet-timers-type.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"react-router-dom": minor
3+
---
4+
5+
Add `unstable_useBlocker` hook for blocking navigations within the app's location origin

‎.gitignore

+2-1
Original file line numberDiff line numberDiff line change
@@ -22,4 +22,5 @@ node_modules/
2222
/packages/react-router-dom-v5-compat/react-router-dom
2323

2424
.eslintcache
25-
/.env
25+
/.env
26+
/NOTES.md

‎examples/navigation-blocking/.gitignore

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules
2+
.DS_Store
3+
dist
4+
dist-ssr
5+
*.local

‎examples/navigation-blocking/.stackblitzrc

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"installDependencies": true,
3+
"startCommand": "npm run dev"
4+
}

‎examples/navigation-blocking/README.md

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
title: Navigation Blocking
3+
toc: false
4+
order: 1
5+
---
6+
7+
# Navigation Blocking
8+
9+
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.
10+
11+
## Preview
12+
13+
Open this example on [StackBlitz](https://stackblitz.com):
14+
15+
[![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)

‎examples/navigation-blocking/index.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>React Router - Navigation Blocking</title>
7+
</head>
8+
<body>
9+
<div id="root"></div>
10+
<script type="module" src="/src/main.tsx"></script>
11+
</body>
12+
</html>

0 commit comments

Comments
 (0)