Skip to content
This repository has been archived by the owner on Jul 15, 2019. It is now read-only.

Commit

Permalink
Move onbeforeunload docs to docs folder
Browse files Browse the repository at this point in the history
  • Loading branch information
Michael Ridgway committed Jul 9, 2015
1 parent b3e8548 commit 4b6f086
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 16 deletions.
16 changes: 0 additions & 16 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -42,22 +42,6 @@ $ npm install --save fluxible-router

You can also look into this [polyfill.io polyfill service](https://cdn.polyfill.io/v1/).

## onbeforeunload Support

The `History` API does not allow `popstate` events to be cancelled, which results in `window.onbeforeunload()` methods not being triggered. This is problematic for users, since application state could be lost when they navigate to a certain page without knowing the consequences.

Our solution is to check for a `window.onbeforeunload()` method, prompt the user with `window.confirm()`, and then navigate to the correct route based on the confirmation. If a route is cancelled by the user, we reset the page URL back to the original URL by using the `History` `pushState()` method.

To implement the `window.onbeforeunload()` method, you need to set it within the components that need user verification before leaving a page. Here is an example:

```javascript
componentDidMount: function() {
window.onbeforeunload = function () {
return 'Make sure to save your changes before leaving this page!';
}
}
```

## Compatible React Versions

| Compatible React Version | fluxible-router Version |
Expand Down
16 changes: 16 additions & 0 deletions docs/api/handleHistory.md
Original file line number Diff line number Diff line change
Expand Up @@ -65,3 +65,19 @@ class AppComponent extends React.Component {

export default AppComponent;
```

## onbeforeunload Support

The `History` API does not allow `popstate` events to be cancelled, which results in `window.onbeforeunload()` methods not being triggered. This is problematic for users, since application state could be lost when they navigate to a certain page without knowing the consequences.

Our solution is to check for a `window.onbeforeunload()` method, prompt the user with `window.confirm()`, and then navigate to the correct route based on the confirmation. If a route is cancelled by the user, we reset the page URL back to the original URL by using the `History` `pushState()` method.

To implement the `window.onbeforeunload()` method, you need to set it within the components that need user verification before leaving a page. Here is an example:

```javascript
componentDidMount: function() {
window.onbeforeunload = function () {
return 'Make sure to save your changes before leaving this page!';
}
}
```

0 comments on commit 4b6f086

Please sign in to comment.