You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Allow the application to block navigations within the SPA and present the user a confirmation dialog to confirm the navigation. Mostly used to avoid using half-filled form data. This does not handle hard-reloads or cross-origin navigations.
14
-
15
-
## Signature
24
+
Allow the application to block navigations within the SPA and present the
25
+
user a confirmation dialog to confirm the navigation. Mostly used to avoid
26
+
using half-filled form data. This does not handle hard-reloads or
27
+
cross-origin navigations.
28
+
29
+
The Blocker object returned by the hook has the following properties:
30
+
31
+
-**`state`**
32
+
-`unblocked` - the blocker is idle and has not prevented any navigation
33
+
-`blocked` - the blocker has prevented a navigation
34
+
-`proceeding` - the blocker is proceeding through from a blocked navigation
35
+
-**`location`**
36
+
- When in a `blocked` state, this represents the [`Location`](https://api.reactrouter.com/v7/interfaces/react_router.Location.html) to which we
37
+
blocked a navigation. When in a `proceeding` state, this is the location
38
+
being navigated to after a `blocker.proceed()` call.
39
+
-**`proceed()`**
40
+
- When in a `blocked` state, you may call `blocker.proceed()` to proceed to the
41
+
blocked location.
42
+
-**`reset()`**
43
+
- When in a `blocked` state, you may call `blocker.reset()` to return the blocker
44
+
back to an `unblocked` state and leave the user at the current location.
Whether or not the navigation should be blocked. If `true`, the blocker will prevent the navigation. If `false`, the blocker will not prevent the navigation.
The [Blocker](https://api.reactrouter.com/v7/types/react_router.Blocker.html) object returned by the hook. It has the following properties:
46
-
47
-
### `state`
48
-
49
-
-`unblocked` - the blocker is idle and has not prevented any navigation
50
-
-`blocked` - the blocker has prevented a navigation
51
-
-`proceeding` - the blocker is proceeding through from a blocked navigation
52
-
53
-
### `location`
54
-
55
-
When in a `blocked` state, this represents the [`Location`](https://api.reactrouter.com/v7/interfaces/react_router.Location.html) to which we blocked a navigation. When in a `proceeding` state, this is the location being navigated to after a `blocker.proceed()` call.
When in a `blocked` state, you may call `blocker.proceed()` to proceed to the blocked location.
64
+
## Params
60
65
61
-
### `reset()`
66
+
### shouldBlock
62
67
63
-
When in a `blocked` state, you may call `blocker.reset()` to return the blocker back to an `unblocked` state and leave the user at the current location.
68
+
Either a boolean or a function returning a boolean which indicates whether the navigation should be blocked. The function format receives a single object parameter containing the `currentLocation`, `nextLocation`, and `historyAction` of the potential navigation.
0 commit comments