-
Notifications
You must be signed in to change notification settings - Fork 959
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
46 additions
and
106 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 |
---|---|---|
@@ -1,38 +1,31 @@ | ||
# 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. | ||
`history` lets you block navigation away from the current page so you can make sure e.g. the user wants to leave before they go to another page and possibly lose some changes they've made in the current page. | ||
|
||
```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?'; | ||
// Block navigation and register a callback that | ||
// fires when a navigation attempt is blocked. | ||
let unblock = history.block(tx => { | ||
// Navigation was blocked! Let's show a confirmation dialog | ||
// so the user can decide if they actually want to navigate | ||
// away and discard changes they've made in the current page. | ||
let url = tx.location.pathnanme; | ||
if (window.confirm(`Are you sure you want to go to ${url}?`)) { | ||
// Unblock the navigation. | ||
unblock(); | ||
|
||
// Retry the transition. | ||
tx.retry(); | ||
} | ||
}); | ||
|
||
// 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). | ||
This example uses `window.confirm`, but you could also use your own custom confirm dialog if you'd rather. | ||
|
||
## Customizing the Confirm Dialog | ||
## Caveats | ||
|
||
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. | ||
`history.block` will call your callback for all in-page navigation attempts, but for navigation that reloads the page (e.g. the refresh button or a link that doesn't use `history.push`) it registers [a `beforeunload` handler](https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event) to prevent the navigation. In modern browsers you are not able to customize this dialog. Instead, you'll see something like this (Chrome): | ||
|
||
```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. | ||
} | ||
}); | ||
``` | ||
![Chrome navigation confirm dialog](images/block.png) | ||
|
||
One subtle side effect of registering a `beforeunload` handler is that the page will not be [salvageable](https://html.spec.whatwg.org/#unloading-documents) in [the `pagehide` event](https://developer.mozilla.org/en-US/docs/Web/API/Window/pagehide_event). |
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 was deleted.
Oops, something went wrong.
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 |
---|---|---|
@@ -1,11 +1,7 @@ | ||
Welcome to the history docs! The library isn't huge, so there are really just a few files here for you to browse. | ||
Welcome to the history docs! The library is very small, so there are really just a few files here for you to browse. | ||
|
||
If this is your first time here, I'd recommend you first [install](Installation.md) the library and then read both: | ||
If this is your first time here, we'd recommend you first [install](Installation.md) the library and then read: | ||
|
||
- [Getting Started](GettingStarted.md) | ||
- [Navigation](Navigation.md) | ||
|
||
For more advanced usage, check out: | ||
|
||
- [Blocking](Blocking.md) - Details about how to block navigation attempts | ||
- [Misc](Misc.md) - Miscellaneous topics about several API details | ||
- [Blocking Navigation](Blocking.md) |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.