-
Notifications
You must be signed in to change notification settings - Fork 960
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
7 changed files
with
278 additions
and
262 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
# Blocking Transitions | ||
|
||
`history` lets you register a prompt message that will be shown to the user before location listeners are notified. This allows you to make sure the user wants to leave the current page before they navigate away. | ||
|
||
```js | ||
// Register a simple prompt message that will be shown the | ||
// user before they navigate away from the current page. | ||
const unblock = history.block('Are you sure you want to leave this page?'); | ||
|
||
// Or use a function that returns the message when it's needed. | ||
history.block((location, action) => { | ||
// The location and action arguments indicate the location | ||
// we're transitioning to and how we're getting there. | ||
|
||
// A common use case is to prevent the user from leaving the | ||
// page if there's a form they haven't submitted yet. | ||
if (input.value !== '') return 'Are you sure you want to leave this page?'; | ||
}); | ||
|
||
// To stop blocking transitions, call the function returned from block(). | ||
unblock(); | ||
``` | ||
|
||
**Note:** You'll need to provide a `getUserConfirmation` function to use this feature with `createMemoryHistory` (see below). | ||
|
||
## Customizing the Confirm Dialog | ||
|
||
By default, [`window.confirm`](https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm) is used to show prompt messages to the user. If you need to override this behavior (or if you're using `createMemoryHistory`, which doesn't assume a DOM environment), provide a `getUserConfirmation` function when you create your history object. | ||
|
||
```js | ||
const history = createHistory({ | ||
getUserConfirmation(message, callback) { | ||
// Show some custom dialog to the user and call | ||
// callback(true) to continue the transiton, or | ||
// callback(false) to abort it. | ||
} | ||
}); | ||
``` |
Oops, something went wrong.