Yet another large refactoring (hooray!)

[added] Navigation mixin for components that need to modify the URL
[added] CurrentPath mixin for components that need to know the current URL path
[added] getActiveRoutes, getActiveParams, and getActiveQuery methods to ActiveState mixin
[removed] Awkward updateActiveState callback from ActiveState mixin
[removed] Router.PathState (use Router.CurrentPath instead)
[removed] Router.Transitions (use Router.Navigation instead)
[removed] Router.RouteLookup (because it was useless)
[added] <Routes scrollBehavior="browser"> as an alternative to scrollBehavior="imitateBrowser"
[changed] <Routes fixedPath> => <Routes initialPath>. Currently only used in testing, but will be useful for SSR
[added] <Routes onTransition> but starting to think the <Routes on*> hooks should be private

Author: mjackson

modules/actions/LocationActions.js

@@ -21,7 +21,12 @@ var LocationActions = {
   /**
    * Indicates the most recent entry should be removed from the history stack.
    */
-  POP: 'pop'
+  POP: 'pop',
+
+  /**
+   * Indicates that a route transition is finished.
+   */
+  FINISHED_TRANSITION: 'finished-transition'
 
 };
 

modules/behaviors/ImitateBrowserBehavior.js

@@ -0,0 +1,23 @@
+var LocationActions = require('../actions/LocationActions');
+
+/**
+ * A scroll behavior that attempts to imitate the default behavior
+ * of modern browsers.
+ */
+var ImitateBrowserBehavior = {
+
+  updateScrollPosition: function (position, actionType) {
+    switch (actionType) {
+      case LocationActions.PUSH:
+      case LocationActions.REPLACE:
+        window.scrollTo(0, 0);
+        break;
+      case LocationActions.POP:
+        window.scrollTo(position.x, position.y);
+        break;
+    }
+  }
+
+};
+
+module.exports = ImitateBrowserBehavior;

modules/behaviors/ScrollToTopBehavior.js

@@ -0,0 +1,13 @@
+/**
+ * A scroll behavior that always scrolls to the top of the page
+ * after a transition.
+ */
+var ScrollToTopBehavior = {
+
+  updateScrollPosition: function () {
+    window.scrollTo(0, 0);
+  }
+
+};
+
+module.exports = ScrollToTopBehavior;

modules/components/Link.js

@@ -1,7 +1,7 @@
 var React = require('react');
 var merge = require('react/lib/merge');
 var ActiveState = require('../mixins/ActiveState');
-var Transitions = require('../mixins/Transitions');
+var Navigation = require('../mixins/Navigation');
 
 function isLeftClickEvent(event) {
   return event.button === 0;
@@ -33,11 +33,11 @@ var Link = React.createClass({
 
   displayName: 'Link',
 
-  mixins: [ ActiveState, Transitions ],
+  mixins: [ ActiveState, Navigation ],
 
   propTypes: {
-    to: React.PropTypes.string.isRequired,
     activeClassName: React.PropTypes.string.isRequired,
+    to: React.PropTypes.string.isRequired,
     params: React.PropTypes.object,
     query: React.PropTypes.object,
     onClick: React.PropTypes.func
@@ -49,35 +49,17 @@ var Link = React.createClass({
     };
   },
 
-  getInitialState: function () {
-    return {
-      isActive: false
-    };
-  },
-
-  updateActiveState: function () {
-    this.setState({
-      isActive: this.isActive(this.props.to, this.props.params, this.props.query)
-    });
-  },
-
-  componentWillReceiveProps: function (nextProps) {
-    this.setState({
-      isActive: this.isActive(nextProps.to, nextProps.params, nextProps.query)
-    });
-  },
-
   handleClick: function (event) {
     var allowTransition = true;
-    var onClickResult;
+    var clickResult;
 
     if (this.props.onClick)
-      onClickResult = this.props.onClick(event);
+      clickResult = this.props.onClick(event);
 
     if (isModifiedEvent(event) || !isLeftClickEvent(event))
       return;
 
-    if (onClickResult === false || event.defaultPrevented === true)
+    if (clickResult === false || event.defaultPrevented === true)
       allowTransition = false;
 
     event.preventDefault();
@@ -100,7 +82,7 @@ var Link = React.createClass({
   getClassName: function () {
     var className = this.props.className || '';
 
-    if (this.state.isActive)
+    if (this.isActive(this.props.to, this.props.params, this.props.query))
       className += ' ' + this.props.activeClassName;
 
     return className;