[added] <Routes fixedPath>

Author: mjackson

examples/data-flow/app.js

@@ -6,6 +6,9 @@ var Routes = Router.Routes;
 var Link = Router.Link;
 
 var App = React.createClass({
+
+  mixins: [ Router.Transitions ],
+
   getInitialState: function() {
     return {
       tacos: [
@@ -28,7 +31,7 @@ var App = React.createClass({
       return taco.name != removedTaco;
     });
     this.setState({tacos: tacos});
-    Router.transitionTo('/');
+    this.transitionTo('/');
   },
 
   render: function() {

examples/master-detail/app.js

@@ -132,6 +132,9 @@ var Index = React.createClass({
 });
 
 var Contact = React.createClass({
+
+  mixins: [ Router.Transitions ],
+
   getStateFromStore: function(props) {
     props = props || this.props;
     return {
@@ -164,7 +167,7 @@ var Contact = React.createClass({
 
   destroy: function() {
     ContactStore.removeContact(this.props.params.id);
-    Router.transitionTo('/');
+    this.transitionTo('/');
   },
 
   render: function() {
@@ -182,14 +185,17 @@ var Contact = React.createClass({
 });
 
 var NewContact = React.createClass({
+
+  mixins: [ Router.Transitions ],
+
   createContact: function(event) {
     event.preventDefault();
     ContactStore.addContact({
       first: this.refs.first.getDOMNode().value,
       last: this.refs.last.getDOMNode().value
     }, function(contact) {
-      Router.transitionTo('contact', { id: contact.id });
-    });
+      this.transitionTo('contact', { id: contact.id });
+    }.bind(this));
   },
 
   render: function() {

examples/transitions/app.js

@@ -26,6 +26,9 @@ var Dashboard = React.createClass({
 });
 
 var Form = React.createClass({
+
+  mixins: [ Router.Transitions ],
+
   statics: {
     willTransitionFrom: function(transition, component) {
       if (component.refs.userInput.getDOMNode().value !== '') {
@@ -39,7 +42,7 @@ var Form = React.createClass({
   handleSubmit: function(event) {
     event.preventDefault();
     this.refs.userInput.getDOMNode().value = '';
-    Router.transitionTo('/');
+    this.transitionTo('/');
   },
 
   render: function() {

modules/locations/HashLocation.js

@@ -5,31 +5,35 @@ var LocationDispatcher = require('../dispatchers/LocationDispatcher');
 var getWindowPath = require('../utils/getWindowPath');
 
 function getHashPath() {
-  return window.location.hash.substr(1) || '/';
+  return window.location.hash.substr(1);
 }
 
+var _actionType;
+
 function ensureSlash() {
   var path = getHashPath();
 
   if (path.charAt(0) === '/')
     return true;
 
-  HashLocation.replace('/' + path, _actionSender);
+  HashLocation.replace('/' + path);
 
   return false;
 }
 
-var _actionType, _actionSender;
-
 function onHashChange() {
   if (ensureSlash()) {
+    var path = getHashPath();
+
     LocationDispatcher.handleViewAction({
-      type: _actionType,
-      path: getHashPath(),
-      sender: _actionSender || window
+      // If we don't have an _actionType then all we know is the hash
+      // changed. It was probably caused by the user clicking the Back
+      // button, but may have also been the Forward button.
+      type: _actionType || LocationActions.POP,
+      path: getHashPath()
     });
 
-    _actionSender = null;
+    _actionType = null;
   }
 }
 
@@ -49,18 +53,19 @@ var HashLocation = {
       'You cannot use HashLocation in an environment with no DOM'
     );
 
+    ensureSlash();
+
+    LocationDispatcher.handleViewAction({
+      type: LocationActions.SETUP,
+      path: getHashPath()
+    });
+
     if (window.addEventListener) {
       window.addEventListener('hashchange', onHashChange, false);
     } else {
       window.attachEvent('onhashchange', onHashChange);
     }
 
-    LocationDispatcher.handleViewAction({
-      type: LocationActions.SETUP,
-      path: getHashPath(),
-      sender: window
-    });
-
     _isSetup = true;
   },
 
@@ -74,21 +79,18 @@ var HashLocation = {
     _isSetup = false;
   },
 
-  push: function (path, sender) {
+  push: function (path) {
     _actionType = LocationActions.PUSH;
-    _actionSender = sender;
     window.location.hash = path;
   },
 
-  replace: function (path, sender) {
+  replace: function (path) {
     _actionType = LocationActions.REPLACE;
-    _actionSender = sender;
     window.location.replace(getWindowPath() + '#' + path);
   },
 
-  pop: function (sender) {
+  pop: function () {
     _actionType = LocationActions.POP;
-    _actionSender = sender;
     window.history.back();
   },
 

modules/locations/HistoryLocation.js

@@ -4,16 +4,11 @@ var LocationActions = require('../actions/LocationActions');
 var LocationDispatcher = require('../dispatchers/LocationDispatcher');
 var getWindowPath = require('../utils/getWindowPath');
 
-var _actionSender;
-
 function onPopState() {
   LocationDispatcher.handleViewAction({
     type: LocationActions.POP,
-    path: getWindowPath(),
-    sender: _actionSender || window
+    path: getWindowPath()
   });
-
-  _actionSender = null;
 }
 
 var _isSetup = false;
@@ -32,18 +27,17 @@ var HistoryLocation = {
       'You cannot use HistoryLocation in an environment with no DOM'
     );
 
+    LocationDispatcher.handleViewAction({
+      type: LocationActions.SETUP,
+      path: getWindowPath()
+    });
+
     if (window.addEventListener) {
       window.addEventListener('popstate', onPopState, false);
     } else {
       window.attachEvent('popstate', onPopState);
     }
 
-    LocationDispatcher.handleViewAction({
-      type: LocationActions.SETUP,
-      path: getWindowPath(),
-      sender: window
-    });
-
     _isSetup = true;
   },
 
@@ -57,28 +51,25 @@ var HistoryLocation = {
     _isSetup = false;
   },
 
-  push: function (path, sender) {
+  push: function (path) {
     window.history.pushState({ path: path }, '', path);
 
     LocationDispatcher.handleViewAction({
       type: LocationActions.PUSH,
-      path: getWindowPath(),
-      sender: sender
+      path: getWindowPath()
     });
   },
 
-  replace: function (path, sender) {
+  replace: function (path) {
     window.history.replaceState({ path: path }, '', path);
 
     LocationDispatcher.handleViewAction({
       type: LocationActions.REPLACE,
-      path: getWindowPath(),
-      sender: sender
+      path: getWindowPath()
     });
   },
 
-  pop: function (sender) {
-    _actionSender = sender;
+  pop: function () {
     window.history.back();
   },
 

modules/locations/MemoryLocation.js

@@ -19,8 +19,7 @@ var RefreshLocation = {
 
     LocationDispatcher.handleViewAction({
       type: LocationActions.SETUP,
-      path: getWindowPath(),
-      sender: window
+      path: getWindowPath()
     });
   },
 

modules/locations/RefreshLocation.js

@@ -2,6 +2,7 @@ var React = require('react');
 var invariant = require('react/lib/invariant');
 var PathState = require('./PathState');
 var RouteContainer = require('./RouteContainer');
+var LocationActions = require('../actions/LocationActions');
 var HashLocation = require('../locations/HashLocation');
 var Path = require('../utils/Path');
 
@@ -62,52 +63,48 @@ var PathDelegate = {
    * Transitions to the URL specified in the arguments by pushing
    * a new URL onto the history stack.
    */
-  transitionTo: function (to, params, query, sender) {
-    sender = sender || this;
-
+  transitionTo: function (to, params, query) {
     var path = this.makePath(to, params, query);
     var location = this.getLocation();
 
-    // If we have a location, route the transition through it.
+    // If we have a location, route the transition
+    // through it so the URL is updated as well.
     if (location) {
-      location.push(path, this);
+      location.push(path);
     } else if (this.updatePath) {
-      this.updatePath(path, this);
+      this.updatePath(path, LocationActions.PUSH);
     }
   },
 
   /**
    * Transitions to the URL specified in the arguments by replacing
    * the current URL in the history stack.
    */
-  replaceWith: function (to, params, query, sender) {
-    sender = sender || this;
-
+  replaceWith: function (to, params, query) {
     var path = this.makePath(to, params, query);
     var location = this.getLocation();
 
-    // If we have a location, route the transition through it.
+    // If we have a location, route the transition
+    // through it so the URL is updated as well.
     if (location) {
-      location.replace(path, sender);
+      location.replace(path);
     } else if (this.updatePath) {
-      this.updatePath(path, sender);
+      this.updatePath(path, LocationActions.REPLACE);
     }
   },
 
   /**
    * Transitions to the previous URL.
    */
-  goBack: function (sender) {
-    sender = sender || this;
-
+  goBack: function () {
     var location = this.getLocation();
 
     invariant(
       location,
       'You cannot goBack without a location'
     );
 
-    location.pop(sender);
+    location.pop();
   }
 
 };