mailaneel / fluxible-router

Routing for Fluxible applications

Fluxible Router

Isomorphic Flux routing for applications built with Fluxible.

$ npm install --save fluxible-router

Docs

• Quick Start
• API
• Upgrade Guide

Features

• Isomorphic routing
• Follows Flux flow
• Higher order components for handling history and routes
• navigateAction for changing routes
• Updated for React 0.13

Required Polyfills

addEventListener and removeEventListener polyfills are provided by:

• Compatibility code example on Mozilla Developer Network
• A few DOM polyfill libaries listed on Modernizer Polyfill wiki page.

Array.prototype.reduce and Array.prototype.map (used by dependent library, query-string) polyfill examples are provided by:

• Mozilla Developer Network Array.prototype.reduce polyfill
• Mozilla Developer Network Array.prototype.map polyfill

You can also look into this polyfill.io polyfill service.

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:

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
0.13	>= 0.1.x

License

This software is free to use under the Yahoo Inc. BSD license. See the LICENSE file for license text and copyright information.

Third-party open source code used are listed in our package.json file.