├── .gitignore
├── .jshintignore
├── .jshintrc
├── .travis.yml
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── UPGRADE_GUIDE.md
├── bower.json
├── build
    ├── global
    │   ├── ReactRouter.js
    │   └── ReactRouter.min.js
    └── npm
    │   ├── README.md
    │   ├── lib
    │       ├── Cancellation.js
    │       ├── History.js
    │       ├── Match.js
    │       ├── Navigation.js
    │       ├── PathUtils.js
    │       ├── PropTypes.js
    │       ├── Redirect.js
    │       ├── Route.js
    │       ├── ScrollHistory.js
    │       ├── State.js
    │       ├── TestUtils.js
    │       ├── Transition.js
    │       ├── actions
    │       │   └── LocationActions.js
    │       ├── behaviors
    │       │   ├── ImitateBrowserBehavior.js
    │       │   └── ScrollToTopBehavior.js
    │       ├── components
    │       │   ├── ContextWrapper.js
    │       │   ├── DefaultRoute.js
    │       │   ├── Link.js
    │       │   ├── NotFoundRoute.js
    │       │   ├── Redirect.js
    │       │   ├── Route.js
    │       │   └── RouteHandler.js
    │       ├── createRouter.js
    │       ├── createRoutesFromReactChildren.js
    │       ├── getWindowScrollPosition.js
    │       ├── index.js
    │       ├── isReactChildren.js
    │       ├── locations
    │       │   ├── HashLocation.js
    │       │   ├── HistoryLocation.js
    │       │   ├── RefreshLocation.js
    │       │   ├── StaticLocation.js
    │       │   └── TestLocation.js
    │       ├── runRouter.js
    │       └── supportsHistory.js
    │   └── package.json
├── docs
    ├── api
    │   ├── Location.md
    │   ├── README.md
    │   ├── RouterContext.md
    │   ├── Transition.md
    │   ├── components
    │   │   ├── DefaultRoute.md
    │   │   ├── Link.md
    │   │   ├── NotFoundRoute.md
    │   │   ├── Redirect.md
    │   │   ├── Route.md
    │   │   └── RouteHandler.md
    │   ├── create.md
    │   ├── mixins
    │   │   ├── Navigation.md
    │   │   └── State.md
    │   └── run.md
    └── guides
    │   ├── flux.md
    │   ├── overview.md
    │   ├── path-matching.md
    │   ├── server-rendering.md
    │   └── testing.md
├── examples
    ├── README.md
    ├── animations
    │   ├── app.css
    │   ├── app.js
    │   └── index.html
    ├── async-data
    │   ├── app.css
    │   ├── app.js
    │   └── index.html
    ├── auth-flow
    │   ├── app.js
    │   └── index.html
    ├── data-flow
    │   ├── app.css
    │   ├── app.js
    │   └── index.html
    ├── dynamic-segments
    │   ├── app.js
    │   └── index.html
    ├── global.css
    ├── index.html
    ├── master-detail
    │   ├── ContactStore.js
    │   ├── app.css
    │   ├── app.js
    │   └── index.html
    ├── partial-app-loading
    │   ├── app.js
    │   ├── dashboard.js
    │   ├── inbox.js
    │   └── index.html
    ├── query-params
    │   ├── app.js
    │   └── index.html
    ├── rx
    │   ├── app.js
    │   └── index.html
    ├── shared-root
    │   ├── app.js
    │   └── index.html
    ├── sidebar
    │   ├── app.css
    │   ├── app.js
    │   ├── data.js
    │   └── index.html
    ├── simple-master-detail
    │   ├── app.css
    │   ├── app.js
    │   └── index.html
    ├── transitions
    │   ├── app.js
    │   └── index.html
    └── webpack.config.js
├── karma.conf.js
├── modules
    ├── Cancellation.js
    ├── History.js
    ├── Match.js
    ├── Navigation.js
    ├── PathUtils.js
    ├── PropTypes.js
    ├── Redirect.js
    ├── Route.js
    ├── ScrollHistory.js
    ├── State.js
    ├── TestUtils.js
    ├── Transition.js
    ├── __tests__
    │   ├── History-test.js
    │   ├── PathUtils-test.js
    │   ├── Router-test.js
    │   ├── Routing-test.js
    │   └── State-test.js
    ├── actions
    │   └── LocationActions.js
    ├── behaviors
    │   ├── ImitateBrowserBehavior.js
    │   └── ScrollToTopBehavior.js
    ├── components
    │   ├── ContextWrapper.js
    │   ├── DefaultRoute.js
    │   ├── Link.js
    │   ├── NotFoundRoute.js
    │   ├── Redirect.js
    │   ├── Route.js
    │   ├── RouteHandler.js
    │   └── __tests__
    │   │   ├── DefaultRoute-test.js
    │   │   ├── Link-test.js
    │   │   ├── NotFoundRoute-test.js
    │   │   ├── Redirect-test.js
    │   │   ├── Route-test.js
    │   │   └── RouteHandler-test.js
    ├── createRouter.js
    ├── createRoutesFromReactChildren.js
    ├── getWindowScrollPosition.js
    ├── index.js
    ├── isReactChildren.js
    ├── locations
    │   ├── HashLocation.js
    │   ├── HistoryLocation.js
    │   ├── RefreshLocation.js
    │   ├── StaticLocation.js
    │   ├── TestLocation.js
    │   └── __tests__
    │   │   └── HashLocation-test.js
    ├── runRouter.js
    └── supportsHistory.js
├── package.json
├── scripts
    ├── preview-release.sh
    └── release.sh
├── tests.webpack.js
└── webpack.config.js


/.gitignore:
--------------------------------------------------------------------------------
1 | examples/**/*-bundle.js
2 | node_modules
3 | npm-debug.log
4 | 


--------------------------------------------------------------------------------
/.jshintignore:
--------------------------------------------------------------------------------
1 | build
2 | examples/**/*-bundle.js
3 | node_modules
4 | 


--------------------------------------------------------------------------------
/.jshintrc:
--------------------------------------------------------------------------------
1 | {
2 |   "asi": true,
3 |   "eqnull": true,
4 |   "esnext": true,
5 |   "unused": "vars",
6 |   "predef": [ "-Promise" ]
7 | }
8 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 |   - "0.10"
4 | before_script:
5 |   - export DISPLAY=:99.0
6 |   - sh -e /etc/init.d/xvfb start
7 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | ### Tests
 2 | 
 3 | All commits that fix bugs or add features need a test.
 4 | 
 5 | `<blink>` Do not merge code without tests.`</blink>`
 6 | 
 7 | ### Commit Subjects for Public API Changes
 8 | 
 9 | If your patch **changes the API or fixes a bug** please use one of the
10 | following prefixes in your commit subject:
11 | 
12 | - `[fixed] ...`
13 | - `[changed] ...`
14 | - `[added] ...`
15 | - `[removed] ...`
16 | 
17 | That ensures the subject line of your commit makes it into the
18 | auto-generated changelog. Do not use these tags if your change doesn't
19 | fix a bug and doesn't change the public API.
20 | 
21 | Commits with changed, added, or removed, should probably be reviewed by
22 | another collaborator.
23 | 
24 | #### When using `[changed]` or `[removed]`...
25 | 
26 | Please include an upgrade path with example code in the commit message.
27 | If it doesn't make sense to do this, then it doesn't make sense to use
28 | `[changed]` or `[removed]` :)
29 | 
30 | ### Docs
31 | 
32 | Please update the docs with any API changes, the code and docs should
33 | always be in sync.
34 | 
35 | ### Development
36 | 
37 | - `npm test` will fire up a karma test runner and watch for changes
38 | - `npm run examples` fires up a webpack dev server that will watch
39 |   for changes and build the examples
40 | 
41 | ### Build
42 | 
43 | Please do not include the output of `scripts/build` in your commits, we
44 | only do this when we release. (Also, you probably don't need to build
45 | anyway unless you are fixing something around our global build.)
46 | 
47 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2014 Ryan Florence, Michael Jackson
 2 | 
 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 4 | this software and associated documentation files (the "Software"), to deal in
 5 | the Software without restriction, including without limitation the rights to
 6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
 7 | of the Software, and to permit persons to whom the Software is furnished to do
 8 | so, subject to the following conditions:
 9 | 
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 | 
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19 | SOFTWARE.
20 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-router",
 3 |   "version": "0.13.1",
 4 |   "description": "A complete routing library for React.js",
 5 |   "main": "build/global/ReactRouter.js",
 6 |   "homepage": "https://github.com/rackt/react-router",
 7 |   "authors": [
 8 |     "Ryan Florence",
 9 |     "Michael Jackson"
10 |   ],
11 |   "keywords": [
12 |     "react",
13 |     "router"
14 |   ],
15 |   "license": "MIT",
16 |   "ignore": [
17 |     "**/.*",
18 |     "node_modules",
19 |     "bower_components",
20 |     "specs",
21 |     "modules",
22 |     "examples",
23 |     "script",
24 |     "CONTRIBUTING.md",
25 |     "karma.conf.js",
26 |     "package.json",
27 |     "webpack.config.js"
28 |   ]
29 | }
30 | 


--------------------------------------------------------------------------------
/build/npm/lib/Cancellation.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 | 
3 | /**
4 |  * Represents a cancellation caused by navigating away
5 |  * before the previous transition has fully resolved.
6 |  */
7 | function Cancellation() {}
8 | 
9 | module.exports = Cancellation;


--------------------------------------------------------------------------------
/build/npm/lib/History.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | var invariant = require("react/lib/invariant");
 4 | var canUseDOM = require("react/lib/ExecutionEnvironment").canUseDOM;
 5 | 
 6 | var History = {
 7 | 
 8 |   /**
 9 |    * The current number of entries in the history.
10 |    *
11 |    * Note: This property is read-only.
12 |    */
13 |   length: 1,
14 | 
15 |   /**
16 |    * Sends the browser back one entry in the history.
17 |    */
18 |   back: function back() {
19 |     invariant(canUseDOM, "Cannot use History.back without a DOM");
20 | 
21 |     // Do this first so that History.length will
22 |     // be accurate in location change listeners.
23 |     History.length -= 1;
24 | 
25 |     window.history.back();
26 |   }
27 | 
28 | };
29 | 
30 | module.exports = History;


--------------------------------------------------------------------------------
/build/npm/lib/Match.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | var _createClass = (function () { function defineProperties(target, props) { for (var key in props) { var prop = props[key]; prop.configurable = true; if (prop.value) prop.writable = true; } Object.defineProperties(target, props); } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
 4 | 
 5 | var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } };
 6 | 
 7 | /* jshint -W084 */
 8 | var PathUtils = require("./PathUtils");
 9 | 
10 | function deepSearch(route, pathname, query) {
11 |   // Check the subtree first to find the most deeply-nested match.
12 |   var childRoutes = route.childRoutes;
13 |   if (childRoutes) {
14 |     var match, childRoute;
15 |     for (var i = 0, len = childRoutes.length; i < len; ++i) {
16 |       childRoute = childRoutes[i];
17 | 
18 |       if (childRoute.isDefault || childRoute.isNotFound) continue; // Check these in order later.
19 | 
20 |       if (match = deepSearch(childRoute, pathname, query)) {
21 |         // A route in the subtree matched! Add this route and we're done.
22 |         match.routes.unshift(route);
23 |         return match;
24 |       }
25 |     }
26 |   }
27 | 
28 |   // No child routes matched; try the default route.
29 |   var defaultRoute = route.defaultRoute;
30 |   if (defaultRoute && (params = PathUtils.extractParams(defaultRoute.path, pathname))) {
31 |     return new Match(pathname, params, query, [route, defaultRoute]);
32 |   } // Does the "not found" route match?
33 |   var notFoundRoute = route.notFoundRoute;
34 |   if (notFoundRoute && (params = PathUtils.extractParams(notFoundRoute.path, pathname))) {
35 |     return new Match(pathname, params, query, [route, notFoundRoute]);
36 |   } // Last attempt: check this route.
37 |   var params = PathUtils.extractParams(route.path, pathname);
38 |   if (params) {
39 |     return new Match(pathname, params, query, [route]);
40 |   }return null;
41 | }
42 | 
43 | var Match = (function () {
44 |   function Match(pathname, params, query, routes) {
45 |     _classCallCheck(this, Match);
46 | 
47 |     this.pathname = pathname;
48 |     this.params = params;
49 |     this.query = query;
50 |     this.routes = routes;
51 |   }
52 | 
53 |   _createClass(Match, null, {
54 |     findMatch: {
55 | 
56 |       /**
57 |        * Attempts to match depth-first a route in the given route's
58 |        * subtree against the given path and returns the match if it
59 |        * succeeds, null if no match can be made.
60 |        */
61 | 
62 |       value: function findMatch(routes, path) {
63 |         var pathname = PathUtils.withoutQuery(path);
64 |         var query = PathUtils.extractQuery(path);
65 |         var match = null;
66 | 
67 |         for (var i = 0, len = routes.length; match == null && i < len; ++i) match = deepSearch(routes[i], pathname, query);
68 | 
69 |         return match;
70 |       }
71 |     }
72 |   });
73 | 
74 |   return Match;
75 | })();
76 | 
77 | module.exports = Match;


--------------------------------------------------------------------------------
/build/npm/lib/Navigation.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | var warning = require("react/lib/warning");
 4 | var PropTypes = require("./PropTypes");
 5 | 
 6 | function deprecatedMethod(routerMethodName, fn) {
 7 |   return function () {
 8 |     warning(false, "Router.Navigation is deprecated. Please use this.context.router." + routerMethodName + "() instead");
 9 | 
10 |     return fn.apply(this, arguments);
11 |   };
12 | }
13 | 
14 | /**
15 |  * A mixin for components that modify the URL.
16 |  *
17 |  * Example:
18 |  *
19 |  *   var MyLink = React.createClass({
20 |  *     mixins: [ Router.Navigation ],
21 |  *     handleClick(event) {
22 |  *       event.preventDefault();
23 |  *       this.transitionTo('aRoute', { the: 'params' }, { the: 'query' });
24 |  *     },
25 |  *     render() {
26 |  *       return (
27 |  *         <a onClick={this.handleClick}>Click me!</a>
28 |  *       );
29 |  *     }
30 |  *   });
31 |  */
32 | var Navigation = {
33 | 
34 |   contextTypes: {
35 |     router: PropTypes.router.isRequired
36 |   },
37 | 
38 |   /**
39 |    * Returns an absolute URL path created from the given route
40 |    * name, URL parameters, and query values.
41 |    */
42 |   makePath: deprecatedMethod("makePath", function (to, params, query) {
43 |     return this.context.router.makePath(to, params, query);
44 |   }),
45 | 
46 |   /**
47 |    * Returns a string that may safely be used as the href of a
48 |    * link to the route with the given name.
49 |    */
50 |   makeHref: deprecatedMethod("makeHref", function (to, params, query) {
51 |     return this.context.router.makeHref(to, params, query);
52 |   }),
53 | 
54 |   /**
55 |    * Transitions to the URL specified in the arguments by pushing
56 |    * a new URL onto the history stack.
57 |    */
58 |   transitionTo: deprecatedMethod("transitionTo", function (to, params, query) {
59 |     this.context.router.transitionTo(to, params, query);
60 |   }),
61 | 
62 |   /**
63 |    * Transitions to the URL specified in the arguments by replacing
64 |    * the current URL in the history stack.
65 |    */
66 |   replaceWith: deprecatedMethod("replaceWith", function (to, params, query) {
67 |     this.context.router.replaceWith(to, params, query);
68 |   }),
69 | 
70 |   /**
71 |    * Transitions to the previous URL.
72 |    */
73 |   goBack: deprecatedMethod("goBack", function () {
74 |     return this.context.router.goBack();
75 |   })
76 | 
77 | };
78 | 
79 | module.exports = Navigation;


--------------------------------------------------------------------------------
/build/npm/lib/PropTypes.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | var assign = require("react/lib/Object.assign");
 4 | var ReactPropTypes = require("react").PropTypes;
 5 | var Route = require("./Route");
 6 | 
 7 | var PropTypes = assign({}, ReactPropTypes, {
 8 | 
 9 |   /**
10 |    * Indicates that a prop should be falsy.
11 |    */
12 |   falsy: function falsy(props, propName, componentName) {
13 |     if (props[propName]) {
14 |       return new Error("<" + componentName + "> may not have a \"" + propName + "\" prop");
15 |     }
16 |   },
17 | 
18 |   /**
19 |    * Indicates that a prop should be a Route object.
20 |    */
21 |   route: ReactPropTypes.instanceOf(Route),
22 | 
23 |   /**
24 |    * Indicates that a prop should be a Router object.
25 |    */
26 |   //router: ReactPropTypes.instanceOf(Router) // TODO
27 |   router: ReactPropTypes.func
28 | 
29 | });
30 | 
31 | module.exports = PropTypes;


--------------------------------------------------------------------------------
/build/npm/lib/Redirect.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | /**
 4 |  * Encapsulates a redirect to the given route.
 5 |  */
 6 | function Redirect(to, params, query) {
 7 |   this.to = to;
 8 |   this.params = params;
 9 |   this.query = query;
10 | }
11 | 
12 | module.exports = Redirect;


--------------------------------------------------------------------------------
/build/npm/lib/ScrollHistory.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | var invariant = require("react/lib/invariant");
 4 | var canUseDOM = require("react/lib/ExecutionEnvironment").canUseDOM;
 5 | var getWindowScrollPosition = require("./getWindowScrollPosition");
 6 | 
 7 | function shouldUpdateScroll(state, prevState) {
 8 |   if (!prevState) {
 9 |     return true;
10 |   } // Don't update scroll position when only the query has changed.
11 |   if (state.pathname === prevState.pathname) {
12 |     return false;
13 |   }var routes = state.routes;
14 |   var prevRoutes = prevState.routes;
15 | 
16 |   var sharedAncestorRoutes = routes.filter(function (route) {
17 |     return prevRoutes.indexOf(route) !== -1;
18 |   });
19 | 
20 |   return !sharedAncestorRoutes.some(function (route) {
21 |     return route.ignoreScrollBehavior;
22 |   });
23 | }
24 | 
25 | /**
26 |  * Provides the router with the ability to manage window scroll position
27 |  * according to its scroll behavior.
28 |  */
29 | var ScrollHistory = {
30 | 
31 |   statics: {
32 | 
33 |     /**
34 |      * Records curent scroll position as the last known position for the given URL path.
35 |      */
36 |     recordScrollPosition: function recordScrollPosition(path) {
37 |       if (!this.scrollHistory) this.scrollHistory = {};
38 | 
39 |       this.scrollHistory[path] = getWindowScrollPosition();
40 |     },
41 | 
42 |     /**
43 |      * Returns the last known scroll position for the given URL path.
44 |      */
45 |     getScrollPosition: function getScrollPosition(path) {
46 |       if (!this.scrollHistory) this.scrollHistory = {};
47 | 
48 |       return this.scrollHistory[path] || null;
49 |     }
50 | 
51 |   },
52 | 
53 |   componentWillMount: function componentWillMount() {
54 |     invariant(this.constructor.getScrollBehavior() == null || canUseDOM, "Cannot use scroll behavior without a DOM");
55 |   },
56 | 
57 |   componentDidMount: function componentDidMount() {
58 |     this._updateScroll();
59 |   },
60 | 
61 |   componentDidUpdate: function componentDidUpdate(prevProps, prevState) {
62 |     this._updateScroll(prevState);
63 |   },
64 | 
65 |   _updateScroll: function _updateScroll(prevState) {
66 |     if (!shouldUpdateScroll(this.state, prevState)) {
67 |       return;
68 |     }var scrollBehavior = this.constructor.getScrollBehavior();
69 | 
70 |     if (scrollBehavior) scrollBehavior.updateScrollPosition(this.constructor.getScrollPosition(this.state.path), this.state.action);
71 |   }
72 | 
73 | };
74 | 
75 | module.exports = ScrollHistory;


--------------------------------------------------------------------------------
/build/npm/lib/State.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | var warning = require("react/lib/warning");
 4 | var PropTypes = require("./PropTypes");
 5 | 
 6 | function deprecatedMethod(routerMethodName, fn) {
 7 |   return function () {
 8 |     warning(false, "Router.State is deprecated. Please use this.context.router." + routerMethodName + "() instead");
 9 | 
10 |     return fn.apply(this, arguments);
11 |   };
12 | }
13 | 
14 | /**
15 |  * A mixin for components that need to know the path, routes, URL
16 |  * params and query that are currently active.
17 |  *
18 |  * Example:
19 |  *
20 |  *   var AboutLink = React.createClass({
21 |  *     mixins: [ Router.State ],
22 |  *     render() {
23 |  *       var className = this.props.className;
24 |  *   
25 |  *       if (this.isActive('about'))
26 |  *         className += ' is-active';
27 |  *   
28 |  *       return React.DOM.a({ className: className }, this.props.children);
29 |  *     }
30 |  *   });
31 |  */
32 | var State = {
33 | 
34 |   contextTypes: {
35 |     router: PropTypes.router.isRequired
36 |   },
37 | 
38 |   /**
39 |    * Returns the current URL path.
40 |    */
41 |   getPath: deprecatedMethod("getCurrentPath", function () {
42 |     return this.context.router.getCurrentPath();
43 |   }),
44 | 
45 |   /**
46 |    * Returns the current URL path without the query string.
47 |    */
48 |   getPathname: deprecatedMethod("getCurrentPathname", function () {
49 |     return this.context.router.getCurrentPathname();
50 |   }),
51 | 
52 |   /**
53 |    * Returns an object of the URL params that are currently active.
54 |    */
55 |   getParams: deprecatedMethod("getCurrentParams", function () {
56 |     return this.context.router.getCurrentParams();
57 |   }),
58 | 
59 |   /**
60 |    * Returns an object of the query params that are currently active.
61 |    */
62 |   getQuery: deprecatedMethod("getCurrentQuery", function () {
63 |     return this.context.router.getCurrentQuery();
64 |   }),
65 | 
66 |   /**
67 |    * Returns an array of the routes that are currently active.
68 |    */
69 |   getRoutes: deprecatedMethod("getCurrentRoutes", function () {
70 |     return this.context.router.getCurrentRoutes();
71 |   }),
72 | 
73 |   /**
74 |    * A helper method to determine if a given route, params, and query
75 |    * are active.
76 |    */
77 |   isActive: deprecatedMethod("isActive", function (to, params, query) {
78 |     return this.context.router.isActive(to, params, query);
79 |   })
80 | 
81 | };
82 | 
83 | module.exports = State;


--------------------------------------------------------------------------------
/build/npm/lib/TestUtils.js:
--------------------------------------------------------------------------------
  1 | "use strict";
  2 | 
  3 | var React = require("react");
  4 | var RouteHandler = require("./components/RouteHandler");
  5 | var PropTypes = require("./PropTypes");
  6 | 
  7 | exports.Nested = React.createClass({
  8 |   displayName: "Nested",
  9 | 
 10 |   render: function render() {
 11 |     return React.createElement(
 12 |       "div",
 13 |       null,
 14 |       React.createElement(
 15 |         "h1",
 16 |         { className: "Nested" },
 17 |         "Nested"
 18 |       ),
 19 |       React.createElement(RouteHandler, null)
 20 |     );
 21 |   }
 22 | });
 23 | 
 24 | exports.Foo = React.createClass({
 25 |   displayName: "Foo",
 26 | 
 27 |   render: function render() {
 28 |     return React.createElement(
 29 |       "div",
 30 |       { className: "Foo" },
 31 |       "Foo"
 32 |     );
 33 |   }
 34 | });
 35 | 
 36 | exports.Bar = React.createClass({
 37 |   displayName: "Bar",
 38 | 
 39 |   render: function render() {
 40 |     return React.createElement(
 41 |       "div",
 42 |       { className: "Bar" },
 43 |       "Bar"
 44 |     );
 45 |   }
 46 | });
 47 | 
 48 | exports.Baz = React.createClass({
 49 |   displayName: "Baz",
 50 | 
 51 |   render: function render() {
 52 |     return React.createElement(
 53 |       "div",
 54 |       { className: "Baz" },
 55 |       "Baz"
 56 |     );
 57 |   }
 58 | });
 59 | 
 60 | exports.Async = React.createClass({
 61 |   displayName: "Async",
 62 | 
 63 |   statics: {
 64 |     delay: 10,
 65 | 
 66 |     willTransitionTo: function willTransitionTo(transition, params, query, callback) {
 67 |       setTimeout(callback, exports.Async.delay);
 68 |     }
 69 |   },
 70 | 
 71 |   render: function render() {
 72 |     return React.createElement(
 73 |       "div",
 74 |       { className: "Async" },
 75 |       "Async"
 76 |     );
 77 |   }
 78 | });
 79 | 
 80 | exports.RedirectToFoo = React.createClass({
 81 |   displayName: "RedirectToFoo",
 82 | 
 83 |   statics: {
 84 |     willTransitionTo: function willTransitionTo(transition) {
 85 |       transition.redirect("/foo");
 86 |     }
 87 |   },
 88 | 
 89 |   render: function render() {
 90 |     return null;
 91 |   }
 92 | });
 93 | 
 94 | exports.RedirectToFooAsync = React.createClass({
 95 |   displayName: "RedirectToFooAsync",
 96 | 
 97 |   statics: {
 98 |     delay: 10,
 99 | 
100 |     willTransitionTo: function willTransitionTo(transition, params, query, callback) {
101 |       setTimeout(function () {
102 |         transition.redirect("/foo");
103 |         callback();
104 |       }, exports.RedirectToFooAsync.delay);
105 |     }
106 |   },
107 | 
108 |   render: function render() {
109 |     return null;
110 |   }
111 | });
112 | 
113 | exports.Abort = React.createClass({
114 |   displayName: "Abort",
115 | 
116 |   statics: {
117 |     willTransitionTo: function willTransitionTo(transition) {
118 |       transition.abort();
119 |     }
120 |   },
121 | 
122 |   render: function render() {
123 |     return null;
124 |   }
125 | });
126 | 
127 | exports.AbortAsync = React.createClass({
128 |   displayName: "AbortAsync",
129 | 
130 |   statics: {
131 |     delay: 10,
132 | 
133 |     willTransitionTo: function willTransitionTo(transition, params, query, callback) {
134 |       setTimeout(function () {
135 |         transition.abort();
136 |         callback();
137 |       }, exports.AbortAsync.delay);
138 |     }
139 |   },
140 | 
141 |   render: function render() {
142 |     return null;
143 |   }
144 | });
145 | 
146 | exports.EchoFooProp = React.createClass({
147 |   displayName: "EchoFooProp",
148 | 
149 |   render: function render() {
150 |     return React.createElement(
151 |       "div",
152 |       null,
153 |       this.props.foo
154 |     );
155 |   }
156 | });
157 | 
158 | exports.EchoBarParam = React.createClass({
159 |   displayName: "EchoBarParam",
160 | 
161 |   contextTypes: {
162 |     router: PropTypes.router.isRequired
163 |   },
164 |   render: function render() {
165 |     return React.createElement(
166 |       "div",
167 |       { className: "EchoBarParam" },
168 |       this.context.router.getCurrentParams().bar
169 |     );
170 |   }
171 | });


--------------------------------------------------------------------------------
/build/npm/lib/Transition.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | /* jshint -W058 */
 4 | 
 5 | var Cancellation = require("./Cancellation");
 6 | var Redirect = require("./Redirect");
 7 | 
 8 | /**
 9 |  * Encapsulates a transition to a given path.
10 |  *
11 |  * The willTransitionTo and willTransitionFrom handlers receive
12 |  * an instance of this class as their first argument.
13 |  */
14 | function Transition(path, retry) {
15 |   this.path = path;
16 |   this.abortReason = null;
17 |   // TODO: Change this to router.retryTransition(transition)
18 |   this.retry = retry.bind(this);
19 | }
20 | 
21 | Transition.prototype.abort = function (reason) {
22 |   if (this.abortReason == null) this.abortReason = reason || "ABORT";
23 | };
24 | 
25 | Transition.prototype.redirect = function (to, params, query) {
26 |   this.abort(new Redirect(to, params, query));
27 | };
28 | 
29 | Transition.prototype.cancel = function () {
30 |   this.abort(new Cancellation());
31 | };
32 | 
33 | Transition.from = function (transition, routes, components, callback) {
34 |   routes.reduce(function (callback, route, index) {
35 |     return function (error) {
36 |       if (error || transition.abortReason) {
37 |         callback(error);
38 |       } else if (route.onLeave) {
39 |         try {
40 |           route.onLeave(transition, components[index], callback);
41 | 
42 |           // If there is no callback in the argument list, call it automatically.
43 |           if (route.onLeave.length < 3) callback();
44 |         } catch (e) {
45 |           callback(e);
46 |         }
47 |       } else {
48 |         callback();
49 |       }
50 |     };
51 |   }, callback)();
52 | };
53 | 
54 | Transition.to = function (transition, routes, params, query, callback) {
55 |   routes.reduceRight(function (callback, route) {
56 |     return function (error) {
57 |       if (error || transition.abortReason) {
58 |         callback(error);
59 |       } else if (route.onEnter) {
60 |         try {
61 |           route.onEnter(transition, params, query, callback);
62 | 
63 |           // If there is no callback in the argument list, call it automatically.
64 |           if (route.onEnter.length < 4) callback();
65 |         } catch (e) {
66 |           callback(e);
67 |         }
68 |       } else {
69 |         callback();
70 |       }
71 |     };
72 |   }, callback)();
73 | };
74 | 
75 | module.exports = Transition;


--------------------------------------------------------------------------------
/build/npm/lib/actions/LocationActions.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | /**
 4 |  * Actions that modify the URL.
 5 |  */
 6 | var LocationActions = {
 7 | 
 8 |   /**
 9 |    * Indicates a new location is being pushed to the history stack.
10 |    */
11 |   PUSH: "push",
12 | 
13 |   /**
14 |    * Indicates the current location should be replaced.
15 |    */
16 |   REPLACE: "replace",
17 | 
18 |   /**
19 |    * Indicates the most recent entry should be removed from the history stack.
20 |    */
21 |   POP: "pop"
22 | 
23 | };
24 | 
25 | module.exports = LocationActions;


--------------------------------------------------------------------------------
/build/npm/lib/behaviors/ImitateBrowserBehavior.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | var LocationActions = require("../actions/LocationActions");
 4 | 
 5 | /**
 6 |  * A scroll behavior that attempts to imitate the default behavior
 7 |  * of modern browsers.
 8 |  */
 9 | var ImitateBrowserBehavior = {
10 | 
11 |   updateScrollPosition: function updateScrollPosition(position, actionType) {
12 |     switch (actionType) {
13 |       case LocationActions.PUSH:
14 |       case LocationActions.REPLACE:
15 |         window.scrollTo(0, 0);
16 |         break;
17 |       case LocationActions.POP:
18 |         if (position) {
19 |           window.scrollTo(position.x, position.y);
20 |         } else {
21 |           window.scrollTo(0, 0);
22 |         }
23 |         break;
24 |     }
25 |   }
26 | 
27 | };
28 | 
29 | module.exports = ImitateBrowserBehavior;


--------------------------------------------------------------------------------
/build/npm/lib/behaviors/ScrollToTopBehavior.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | /**
 4 |  * A scroll behavior that always scrolls to the top of the page
 5 |  * after a transition.
 6 |  */
 7 | var ScrollToTopBehavior = {
 8 | 
 9 |   updateScrollPosition: function updateScrollPosition() {
10 |     window.scrollTo(0, 0);
11 |   }
12 | 
13 | };
14 | 
15 | module.exports = ScrollToTopBehavior;


--------------------------------------------------------------------------------
/build/npm/lib/components/ContextWrapper.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | var _createClass = (function () { function defineProperties(target, props) { for (var key in props) { var prop = props[key]; prop.configurable = true; if (prop.value) prop.writable = true; } Object.defineProperties(target, props); } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
 4 | 
 5 | var _inherits = function (subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; };
 6 | 
 7 | var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } };
 8 | 
 9 | /**
10 |  * This component is necessary to get around a context warning
11 |  * present in React 0.13.0. It sovles this by providing a separation
12 |  * between the "owner" and "parent" contexts.
13 |  */
14 | 
15 | var React = require("react");
16 | 
17 | var ContextWrapper = (function (_React$Component) {
18 |   function ContextWrapper() {
19 |     _classCallCheck(this, ContextWrapper);
20 | 
21 |     if (_React$Component != null) {
22 |       _React$Component.apply(this, arguments);
23 |     }
24 |   }
25 | 
26 |   _inherits(ContextWrapper, _React$Component);
27 | 
28 |   _createClass(ContextWrapper, {
29 |     render: {
30 |       value: function render() {
31 |         return this.props.children;
32 |       }
33 |     }
34 |   });
35 | 
36 |   return ContextWrapper;
37 | })(React.Component);
38 | 
39 | module.exports = ContextWrapper;


--------------------------------------------------------------------------------
/build/npm/lib/components/DefaultRoute.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | var _inherits = function (subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; };
 4 | 
 5 | var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } };
 6 | 
 7 | var PropTypes = require("../PropTypes");
 8 | var RouteHandler = require("./RouteHandler");
 9 | var Route = require("./Route");
10 | 
11 | /**
12 |  * A <DefaultRoute> component is a special kind of <Route> that
13 |  * renders when its parent matches but none of its siblings do.
14 |  * Only one such route may be used at any given level in the
15 |  * route hierarchy.
16 |  */
17 | 
18 | var DefaultRoute = (function (_Route) {
19 |   function DefaultRoute() {
20 |     _classCallCheck(this, DefaultRoute);
21 | 
22 |     if (_Route != null) {
23 |       _Route.apply(this, arguments);
24 |     }
25 |   }
26 | 
27 |   _inherits(DefaultRoute, _Route);
28 | 
29 |   return DefaultRoute;
30 | })(Route);
31 | 
32 | // TODO: Include these in the above class definition
33 | // once we can use ES7 property initializers.
34 | // https://github.com/babel/babel/issues/619
35 | 
36 | DefaultRoute.propTypes = {
37 |   name: PropTypes.string,
38 |   path: PropTypes.falsy,
39 |   children: PropTypes.falsy,
40 |   handler: PropTypes.func.isRequired
41 | };
42 | 
43 | DefaultRoute.defaultProps = {
44 |   handler: RouteHandler
45 | };
46 | 
47 | module.exports = DefaultRoute;


--------------------------------------------------------------------------------
/build/npm/lib/components/NotFoundRoute.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | var _inherits = function (subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; };
 4 | 
 5 | var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } };
 6 | 
 7 | var PropTypes = require("../PropTypes");
 8 | var RouteHandler = require("./RouteHandler");
 9 | var Route = require("./Route");
10 | 
11 | /**
12 |  * A <NotFoundRoute> is a special kind of <Route> that
13 |  * renders when the beginning of its parent's path matches
14 |  * but none of its siblings do, including any <DefaultRoute>.
15 |  * Only one such route may be used at any given level in the
16 |  * route hierarchy.
17 |  */
18 | 
19 | var NotFoundRoute = (function (_Route) {
20 |   function NotFoundRoute() {
21 |     _classCallCheck(this, NotFoundRoute);
22 | 
23 |     if (_Route != null) {
24 |       _Route.apply(this, arguments);
25 |     }
26 |   }
27 | 
28 |   _inherits(NotFoundRoute, _Route);
29 | 
30 |   return NotFoundRoute;
31 | })(Route);
32 | 
33 | // TODO: Include these in the above class definition
34 | // once we can use ES7 property initializers.
35 | // https://github.com/babel/babel/issues/619
36 | 
37 | NotFoundRoute.propTypes = {
38 |   name: PropTypes.string,
39 |   path: PropTypes.falsy,
40 |   children: PropTypes.falsy,
41 |   handler: PropTypes.func.isRequired
42 | };
43 | 
44 | NotFoundRoute.defaultProps = {
45 |   handler: RouteHandler
46 | };
47 | 
48 | module.exports = NotFoundRoute;


--------------------------------------------------------------------------------
/build/npm/lib/components/Redirect.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | var _inherits = function (subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; };
 4 | 
 5 | var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } };
 6 | 
 7 | var PropTypes = require("../PropTypes");
 8 | var Route = require("./Route");
 9 | 
10 | /**
11 |  * A <Redirect> component is a special kind of <Route> that always
12 |  * redirects to another route when it matches.
13 |  */
14 | 
15 | var Redirect = (function (_Route) {
16 |   function Redirect() {
17 |     _classCallCheck(this, Redirect);
18 | 
19 |     if (_Route != null) {
20 |       _Route.apply(this, arguments);
21 |     }
22 |   }
23 | 
24 |   _inherits(Redirect, _Route);
25 | 
26 |   return Redirect;
27 | })(Route);
28 | 
29 | // TODO: Include these in the above class definition
30 | // once we can use ES7 property initializers.
31 | // https://github.com/babel/babel/issues/619
32 | 
33 | Redirect.propTypes = {
34 |   path: PropTypes.string,
35 |   from: PropTypes.string, // Alias for path.
36 |   to: PropTypes.string,
37 |   handler: PropTypes.falsy
38 | };
39 | 
40 | // Redirects should not have a default handler
41 | Redirect.defaultProps = {};
42 | 
43 | module.exports = Redirect;


--------------------------------------------------------------------------------
/build/npm/lib/components/Route.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | var _createClass = (function () { function defineProperties(target, props) { for (var key in props) { var prop = props[key]; prop.configurable = true; if (prop.value) prop.writable = true; } Object.defineProperties(target, props); } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
 4 | 
 5 | var _inherits = function (subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; };
 6 | 
 7 | var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } };
 8 | 
 9 | var React = require("react");
10 | var invariant = require("react/lib/invariant");
11 | var PropTypes = require("../PropTypes");
12 | var RouteHandler = require("./RouteHandler");
13 | 
14 | /**
15 |  * <Route> components specify components that are rendered to the page when the
16 |  * URL matches a given pattern.
17 |  *
18 |  * Routes are arranged in a nested tree structure. When a new URL is requested,
19 |  * the tree is searched depth-first to find a route whose path matches the URL.
20 |  * When one is found, all routes in the tree that lead to it are considered
21 |  * "active" and their components are rendered into the DOM, nested in the same
22 |  * order as they are in the tree.
23 |  *
24 |  * The preferred way to configure a router is using JSX. The XML-like syntax is
25 |  * a great way to visualize how routes are laid out in an application.
26 |  *
27 |  *   var routes = [
28 |  *     <Route handler={App}>
29 |  *       <Route name="login" handler={Login}/>
30 |  *       <Route name="logout" handler={Logout}/>
31 |  *       <Route name="about" handler={About}/>
32 |  *     </Route>
33 |  *   ];
34 |  *   
35 |  *   Router.run(routes, function (Handler) {
36 |  *     React.render(<Handler/>, document.body);
37 |  *   });
38 |  *
39 |  * Handlers for Route components that contain children can render their active
40 |  * child route using a <RouteHandler> element.
41 |  *
42 |  *   var App = React.createClass({
43 |  *     render: function () {
44 |  *       return (
45 |  *         <div class="application">
46 |  *           <RouteHandler/>
47 |  *         </div>
48 |  *       );
49 |  *     }
50 |  *   });
51 |  *
52 |  * If no handler is provided for the route, it will render a matched child route.
53 |  */
54 | 
55 | var Route = (function (_React$Component) {
56 |   function Route() {
57 |     _classCallCheck(this, Route);
58 | 
59 |     if (_React$Component != null) {
60 |       _React$Component.apply(this, arguments);
61 |     }
62 |   }
63 | 
64 |   _inherits(Route, _React$Component);
65 | 
66 |   _createClass(Route, {
67 |     render: {
68 |       value: function render() {
69 |         invariant(false, "%s elements are for router configuration only and should not be rendered", this.constructor.name);
70 |       }
71 |     }
72 |   });
73 | 
74 |   return Route;
75 | })(React.Component);
76 | 
77 | // TODO: Include these in the above class definition
78 | // once we can use ES7 property initializers.
79 | // https://github.com/babel/babel/issues/619
80 | 
81 | Route.propTypes = {
82 |   name: PropTypes.string,
83 |   path: PropTypes.string,
84 |   handler: PropTypes.func,
85 |   ignoreScrollBehavior: PropTypes.bool
86 | };
87 | 
88 | Route.defaultProps = {
89 |   handler: RouteHandler
90 | };
91 | 
92 | module.exports = Route;


--------------------------------------------------------------------------------
/build/npm/lib/components/RouteHandler.js:
--------------------------------------------------------------------------------
  1 | "use strict";
  2 | 
  3 | var _createClass = (function () { function defineProperties(target, props) { for (var key in props) { var prop = props[key]; prop.configurable = true; if (prop.value) prop.writable = true; } Object.defineProperties(target, props); } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
  4 | 
  5 | var _inherits = function (subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; };
  6 | 
  7 | var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } };
  8 | 
  9 | var React = require("react");
 10 | var ContextWrapper = require("./ContextWrapper");
 11 | var assign = require("react/lib/Object.assign");
 12 | var PropTypes = require("../PropTypes");
 13 | 
 14 | var REF_NAME = "__routeHandler__";
 15 | 
 16 | /**
 17 |  * A <RouteHandler> component renders the active child route handler
 18 |  * when routes are nested.
 19 |  */
 20 | 
 21 | var RouteHandler = (function (_React$Component) {
 22 |   function RouteHandler() {
 23 |     _classCallCheck(this, RouteHandler);
 24 | 
 25 |     if (_React$Component != null) {
 26 |       _React$Component.apply(this, arguments);
 27 |     }
 28 |   }
 29 | 
 30 |   _inherits(RouteHandler, _React$Component);
 31 | 
 32 |   _createClass(RouteHandler, {
 33 |     getChildContext: {
 34 |       value: function getChildContext() {
 35 |         return {
 36 |           routeDepth: this.context.routeDepth + 1
 37 |         };
 38 |       }
 39 |     },
 40 |     componentDidMount: {
 41 |       value: function componentDidMount() {
 42 |         this._updateRouteComponent(this.refs[REF_NAME]);
 43 |       }
 44 |     },
 45 |     componentDidUpdate: {
 46 |       value: function componentDidUpdate() {
 47 |         this._updateRouteComponent(this.refs[REF_NAME]);
 48 |       }
 49 |     },
 50 |     componentWillUnmount: {
 51 |       value: function componentWillUnmount() {
 52 |         this._updateRouteComponent(null);
 53 |       }
 54 |     },
 55 |     _updateRouteComponent: {
 56 |       value: function _updateRouteComponent(component) {
 57 |         this.context.router.setRouteComponentAtDepth(this.getRouteDepth(), component);
 58 |       }
 59 |     },
 60 |     getRouteDepth: {
 61 |       value: function getRouteDepth() {
 62 |         return this.context.routeDepth;
 63 |       }
 64 |     },
 65 |     createChildRouteHandler: {
 66 |       value: function createChildRouteHandler(props) {
 67 |         var route = this.context.router.getRouteAtDepth(this.getRouteDepth());
 68 |         return route ? React.createElement(route.handler, assign({}, props || this.props, { ref: REF_NAME })) : null;
 69 |       }
 70 |     },
 71 |     render: {
 72 |       value: function render() {
 73 |         var handler = this.createChildRouteHandler();
 74 |         // <script/> for things like <CSSTransitionGroup/> that don't like null
 75 |         return handler ? React.createElement(
 76 |           ContextWrapper,
 77 |           null,
 78 |           handler
 79 |         ) : React.createElement("script", null);
 80 |       }
 81 |     }
 82 |   });
 83 | 
 84 |   return RouteHandler;
 85 | })(React.Component);
 86 | 
 87 | // TODO: Include these in the above class definition
 88 | // once we can use ES7 property initializers.
 89 | // https://github.com/babel/babel/issues/619
 90 | 
 91 | RouteHandler.contextTypes = {
 92 |   routeDepth: PropTypes.number.isRequired,
 93 |   router: PropTypes.router.isRequired
 94 | };
 95 | 
 96 | RouteHandler.childContextTypes = {
 97 |   routeDepth: PropTypes.number.isRequired
 98 | };
 99 | 
100 | module.exports = RouteHandler;


--------------------------------------------------------------------------------
/build/npm/lib/createRoutesFromReactChildren.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | /* jshint -W084 */
 4 | var React = require("react");
 5 | var assign = require("react/lib/Object.assign");
 6 | var warning = require("react/lib/warning");
 7 | var DefaultRoute = require("./components/DefaultRoute");
 8 | var NotFoundRoute = require("./components/NotFoundRoute");
 9 | var Redirect = require("./components/Redirect");
10 | var Route = require("./Route");
11 | 
12 | function checkPropTypes(componentName, propTypes, props) {
13 |   componentName = componentName || "UnknownComponent";
14 | 
15 |   for (var propName in propTypes) {
16 |     if (propTypes.hasOwnProperty(propName)) {
17 |       var error = propTypes[propName](props, propName, componentName);
18 | 
19 |       if (error instanceof Error) warning(false, error.message);
20 |     }
21 |   }
22 | }
23 | 
24 | function createRouteOptions(props) {
25 |   var options = assign({}, props);
26 |   var handler = options.handler;
27 | 
28 |   if (handler) {
29 |     options.onEnter = handler.willTransitionTo;
30 |     options.onLeave = handler.willTransitionFrom;
31 |   }
32 | 
33 |   return options;
34 | }
35 | 
36 | function createRouteFromReactElement(element) {
37 |   if (!React.isValidElement(element)) {
38 |     return;
39 |   }var type = element.type;
40 |   var props = assign({}, type.defaultProps, element.props);
41 | 
42 |   if (type.propTypes) checkPropTypes(type.displayName, type.propTypes, props);
43 | 
44 |   if (type === DefaultRoute) {
45 |     return Route.createDefaultRoute(createRouteOptions(props));
46 |   }if (type === NotFoundRoute) {
47 |     return Route.createNotFoundRoute(createRouteOptions(props));
48 |   }if (type === Redirect) {
49 |     return Route.createRedirect(createRouteOptions(props));
50 |   }return Route.createRoute(createRouteOptions(props), function () {
51 |     if (props.children) createRoutesFromReactChildren(props.children);
52 |   });
53 | }
54 | 
55 | /**
56 |  * Creates and returns an array of routes created from the given
57 |  * ReactChildren, all of which should be one of <Route>, <DefaultRoute>,
58 |  * <NotFoundRoute>, or <Redirect>, e.g.:
59 |  *
60 |  *   var { createRoutesFromReactChildren, Route, Redirect } = require('react-router');
61 |  *
62 |  *   var routes = createRoutesFromReactChildren(
63 |  *     <Route path="/" handler={App}>
64 |  *       <Route name="user" path="/user/:userId" handler={User}>
65 |  *         <Route name="task" path="tasks/:taskId" handler={Task}/>
66 |  *         <Redirect from="todos/:taskId" to="task"/>
67 |  *       </Route>
68 |  *     </Route>
69 |  *   );
70 |  */
71 | function createRoutesFromReactChildren(children) {
72 |   var routes = [];
73 | 
74 |   React.Children.forEach(children, function (child) {
75 |     if (child = createRouteFromReactElement(child)) routes.push(child);
76 |   });
77 | 
78 |   return routes;
79 | }
80 | 
81 | module.exports = createRoutesFromReactChildren;


--------------------------------------------------------------------------------
/build/npm/lib/getWindowScrollPosition.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | var invariant = require("react/lib/invariant");
 4 | var canUseDOM = require("react/lib/ExecutionEnvironment").canUseDOM;
 5 | 
 6 | /**
 7 |  * Returns the current scroll position of the window as { x, y }.
 8 |  */
 9 | function getWindowScrollPosition() {
10 |   invariant(canUseDOM, "Cannot get current scroll position without a DOM");
11 | 
12 |   return {
13 |     x: window.pageXOffset || document.documentElement.scrollLeft,
14 |     y: window.pageYOffset || document.documentElement.scrollTop
15 |   };
16 | }
17 | 
18 | module.exports = getWindowScrollPosition;


--------------------------------------------------------------------------------
/build/npm/lib/index.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | exports.DefaultRoute = require("./components/DefaultRoute");
 4 | exports.Link = require("./components/Link");
 5 | exports.NotFoundRoute = require("./components/NotFoundRoute");
 6 | exports.Redirect = require("./components/Redirect");
 7 | exports.Route = require("./components/Route");
 8 | exports.RouteHandler = require("./components/RouteHandler");
 9 | 
10 | exports.HashLocation = require("./locations/HashLocation");
11 | exports.HistoryLocation = require("./locations/HistoryLocation");
12 | exports.RefreshLocation = require("./locations/RefreshLocation");
13 | exports.StaticLocation = require("./locations/StaticLocation");
14 | 
15 | exports.ImitateBrowserBehavior = require("./behaviors/ImitateBrowserBehavior");
16 | exports.ScrollToTopBehavior = require("./behaviors/ScrollToTopBehavior");
17 | 
18 | exports.History = require("./History");
19 | exports.Navigation = require("./Navigation");
20 | exports.State = require("./State");
21 | 
22 | exports.createRoute = require("./Route").createRoute;
23 | exports.createDefaultRoute = require("./Route").createDefaultRoute;
24 | exports.createNotFoundRoute = require("./Route").createNotFoundRoute;
25 | exports.createRedirect = require("./Route").createRedirect;
26 | exports.createRoutesFromReactChildren = require("./createRoutesFromReactChildren");
27 | exports.create = require("./createRouter");
28 | exports.run = require("./runRouter");


--------------------------------------------------------------------------------
/build/npm/lib/isReactChildren.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | var React = require("react");
 4 | 
 5 | function isValidChild(object) {
 6 |   return object == null || React.isValidElement(object);
 7 | }
 8 | 
 9 | function isReactChildren(object) {
10 |   return isValidChild(object) || Array.isArray(object) && object.every(isValidChild);
11 | }
12 | 
13 | module.exports = isReactChildren;


--------------------------------------------------------------------------------
/build/npm/lib/locations/HashLocation.js:
--------------------------------------------------------------------------------
  1 | "use strict";
  2 | 
  3 | var LocationActions = require("../actions/LocationActions");
  4 | var History = require("../History");
  5 | 
  6 | var _listeners = [];
  7 | var _isListening = false;
  8 | var _actionType;
  9 | 
 10 | function notifyChange(type) {
 11 |   if (type === LocationActions.PUSH) History.length += 1;
 12 | 
 13 |   var change = {
 14 |     path: HashLocation.getCurrentPath(),
 15 |     type: type
 16 |   };
 17 | 
 18 |   _listeners.forEach(function (listener) {
 19 |     listener.call(HashLocation, change);
 20 |   });
 21 | }
 22 | 
 23 | function ensureSlash() {
 24 |   var path = HashLocation.getCurrentPath();
 25 | 
 26 |   if (path.charAt(0) === "/") {
 27 |     return true;
 28 |   }HashLocation.replace("/" + path);
 29 | 
 30 |   return false;
 31 | }
 32 | 
 33 | function onHashChange() {
 34 |   if (ensureSlash()) {
 35 |     // If we don't have an _actionType then all we know is the hash
 36 |     // changed. It was probably caused by the user clicking the Back
 37 |     // button, but may have also been the Forward button or manual
 38 |     // manipulation. So just guess 'pop'.
 39 |     notifyChange(_actionType || LocationActions.POP);
 40 |     _actionType = null;
 41 |   }
 42 | }
 43 | 
 44 | /**
 45 |  * A Location that uses `window.location.hash`.
 46 |  */
 47 | var HashLocation = {
 48 | 
 49 |   addChangeListener: function addChangeListener(listener) {
 50 |     _listeners.push(listener);
 51 | 
 52 |     // Do this BEFORE listening for hashchange.
 53 |     ensureSlash();
 54 | 
 55 |     if (!_isListening) {
 56 |       if (window.addEventListener) {
 57 |         window.addEventListener("hashchange", onHashChange, false);
 58 |       } else {
 59 |         window.attachEvent("onhashchange", onHashChange);
 60 |       }
 61 | 
 62 |       _isListening = true;
 63 |     }
 64 |   },
 65 | 
 66 |   removeChangeListener: function removeChangeListener(listener) {
 67 |     _listeners = _listeners.filter(function (l) {
 68 |       return l !== listener;
 69 |     });
 70 | 
 71 |     if (_listeners.length === 0) {
 72 |       if (window.removeEventListener) {
 73 |         window.removeEventListener("hashchange", onHashChange, false);
 74 |       } else {
 75 |         window.removeEvent("onhashchange", onHashChange);
 76 |       }
 77 | 
 78 |       _isListening = false;
 79 |     }
 80 |   },
 81 | 
 82 |   push: function push(path) {
 83 |     _actionType = LocationActions.PUSH;
 84 |     window.location.hash = path;
 85 |   },
 86 | 
 87 |   replace: function replace(path) {
 88 |     _actionType = LocationActions.REPLACE;
 89 |     window.location.replace(window.location.pathname + window.location.search + "#" + path);
 90 |   },
 91 | 
 92 |   pop: function pop() {
 93 |     _actionType = LocationActions.POP;
 94 |     History.back();
 95 |   },
 96 | 
 97 |   getCurrentPath: function getCurrentPath() {
 98 |     return decodeURI(
 99 |     // We can't use window.location.hash here because it's not
100 |     // consistent across browsers - Firefox will pre-decode it!
101 |     window.location.href.split("#")[1] || "");
102 |   },
103 | 
104 |   toString: function toString() {
105 |     return "<HashLocation>";
106 |   }
107 | 
108 | };
109 | 
110 | module.exports = HashLocation;


--------------------------------------------------------------------------------
/build/npm/lib/locations/HistoryLocation.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | var LocationActions = require("../actions/LocationActions");
 4 | var History = require("../History");
 5 | 
 6 | var _listeners = [];
 7 | var _isListening = false;
 8 | 
 9 | function notifyChange(type) {
10 |   var change = {
11 |     path: HistoryLocation.getCurrentPath(),
12 |     type: type
13 |   };
14 | 
15 |   _listeners.forEach(function (listener) {
16 |     listener.call(HistoryLocation, change);
17 |   });
18 | }
19 | 
20 | function onPopState(event) {
21 |   if (event.state === undefined) {
22 |     return;
23 |   } // Ignore extraneous popstate events in WebKit.
24 | 
25 |   notifyChange(LocationActions.POP);
26 | }
27 | 
28 | /**
29 |  * A Location that uses HTML5 history.
30 |  */
31 | var HistoryLocation = {
32 | 
33 |   addChangeListener: function addChangeListener(listener) {
34 |     _listeners.push(listener);
35 | 
36 |     if (!_isListening) {
37 |       if (window.addEventListener) {
38 |         window.addEventListener("popstate", onPopState, false);
39 |       } else {
40 |         window.attachEvent("onpopstate", onPopState);
41 |       }
42 | 
43 |       _isListening = true;
44 |     }
45 |   },
46 | 
47 |   removeChangeListener: function removeChangeListener(listener) {
48 |     _listeners = _listeners.filter(function (l) {
49 |       return l !== listener;
50 |     });
51 | 
52 |     if (_listeners.length === 0) {
53 |       if (window.addEventListener) {
54 |         window.removeEventListener("popstate", onPopState, false);
55 |       } else {
56 |         window.removeEvent("onpopstate", onPopState);
57 |       }
58 | 
59 |       _isListening = false;
60 |     }
61 |   },
62 | 
63 |   push: function push(path) {
64 |     window.history.pushState({ path: path }, "", path);
65 |     History.length += 1;
66 |     notifyChange(LocationActions.PUSH);
67 |   },
68 | 
69 |   replace: function replace(path) {
70 |     window.history.replaceState({ path: path }, "", path);
71 |     notifyChange(LocationActions.REPLACE);
72 |   },
73 | 
74 |   pop: History.back,
75 | 
76 |   getCurrentPath: function getCurrentPath() {
77 |     return decodeURI(window.location.pathname + window.location.search);
78 |   },
79 | 
80 |   toString: function toString() {
81 |     return "<HistoryLocation>";
82 |   }
83 | 
84 | };
85 | 
86 | module.exports = HistoryLocation;


--------------------------------------------------------------------------------
/build/npm/lib/locations/RefreshLocation.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | var HistoryLocation = require("./HistoryLocation");
 4 | var History = require("../History");
 5 | 
 6 | /**
 7 |  * A Location that uses full page refreshes. This is used as
 8 |  * the fallback for HistoryLocation in browsers that do not
 9 |  * support the HTML5 history API.
10 |  */
11 | var RefreshLocation = {
12 | 
13 |   push: function push(path) {
14 |     window.location = path;
15 |   },
16 | 
17 |   replace: function replace(path) {
18 |     window.location.replace(path);
19 |   },
20 | 
21 |   pop: History.back,
22 | 
23 |   getCurrentPath: HistoryLocation.getCurrentPath,
24 | 
25 |   toString: function toString() {
26 |     return "<RefreshLocation>";
27 |   }
28 | 
29 | };
30 | 
31 | module.exports = RefreshLocation;


--------------------------------------------------------------------------------
/build/npm/lib/locations/StaticLocation.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | var _createClass = (function () { function defineProperties(target, props) { for (var key in props) { var prop = props[key]; prop.configurable = true; if (prop.value) prop.writable = true; } Object.defineProperties(target, props); } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
 4 | 
 5 | var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } };
 6 | 
 7 | var invariant = require("react/lib/invariant");
 8 | 
 9 | function throwCannotModify() {
10 |   invariant(false, "You cannot modify a static location");
11 | }
12 | 
13 | /**
14 |  * A location that only ever contains a single path. Useful in
15 |  * stateless environments like servers where there is no path history,
16 |  * only the path that was used in the request.
17 |  */
18 | 
19 | var StaticLocation = (function () {
20 |   function StaticLocation(path) {
21 |     _classCallCheck(this, StaticLocation);
22 | 
23 |     this.path = path;
24 |   }
25 | 
26 |   _createClass(StaticLocation, {
27 |     getCurrentPath: {
28 |       value: function getCurrentPath() {
29 |         return this.path;
30 |       }
31 |     },
32 |     toString: {
33 |       value: function toString() {
34 |         return "<StaticLocation path=\"" + this.path + "\">";
35 |       }
36 |     }
37 |   });
38 | 
39 |   return StaticLocation;
40 | })();
41 | 
42 | // TODO: Include these in the above class definition
43 | // once we can use ES7 property initializers.
44 | // https://github.com/babel/babel/issues/619
45 | 
46 | StaticLocation.prototype.push = throwCannotModify;
47 | StaticLocation.prototype.replace = throwCannotModify;
48 | StaticLocation.prototype.pop = throwCannotModify;
49 | 
50 | module.exports = StaticLocation;


--------------------------------------------------------------------------------
/build/npm/lib/locations/TestLocation.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | var _createClass = (function () { function defineProperties(target, props) { for (var key in props) { var prop = props[key]; prop.configurable = true; if (prop.value) prop.writable = true; } Object.defineProperties(target, props); } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
 4 | 
 5 | var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } };
 6 | 
 7 | var invariant = require("react/lib/invariant");
 8 | var LocationActions = require("../actions/LocationActions");
 9 | var History = require("../History");
10 | 
11 | /**
12 |  * A location that is convenient for testing and does not require a DOM.
13 |  */
14 | 
15 | var TestLocation = (function () {
16 |   function TestLocation(history) {
17 |     _classCallCheck(this, TestLocation);
18 | 
19 |     this.history = history || [];
20 |     this.listeners = [];
21 |     this._updateHistoryLength();
22 |   }
23 | 
24 |   _createClass(TestLocation, {
25 |     needsDOM: {
26 |       get: function () {
27 |         return false;
28 |       }
29 |     },
30 |     _updateHistoryLength: {
31 |       value: function _updateHistoryLength() {
32 |         History.length = this.history.length;
33 |       }
34 |     },
35 |     _notifyChange: {
36 |       value: function _notifyChange(type) {
37 |         var change = {
38 |           path: this.getCurrentPath(),
39 |           type: type
40 |         };
41 | 
42 |         for (var i = 0, len = this.listeners.length; i < len; ++i) this.listeners[i].call(this, change);
43 |       }
44 |     },
45 |     addChangeListener: {
46 |       value: function addChangeListener(listener) {
47 |         this.listeners.push(listener);
48 |       }
49 |     },
50 |     removeChangeListener: {
51 |       value: function removeChangeListener(listener) {
52 |         this.listeners = this.listeners.filter(function (l) {
53 |           return l !== listener;
54 |         });
55 |       }
56 |     },
57 |     push: {
58 |       value: function push(path) {
59 |         this.history.push(path);
60 |         this._updateHistoryLength();
61 |         this._notifyChange(LocationActions.PUSH);
62 |       }
63 |     },
64 |     replace: {
65 |       value: function replace(path) {
66 |         invariant(this.history.length, "You cannot replace the current path with no history");
67 | 
68 |         this.history[this.history.length - 1] = path;
69 | 
70 |         this._notifyChange(LocationActions.REPLACE);
71 |       }
72 |     },
73 |     pop: {
74 |       value: function pop() {
75 |         this.history.pop();
76 |         this._updateHistoryLength();
77 |         this._notifyChange(LocationActions.POP);
78 |       }
79 |     },
80 |     getCurrentPath: {
81 |       value: function getCurrentPath() {
82 |         return this.history[this.history.length - 1];
83 |       }
84 |     },
85 |     toString: {
86 |       value: function toString() {
87 |         return "<TestLocation>";
88 |       }
89 |     }
90 |   });
91 | 
92 |   return TestLocation;
93 | })();
94 | 
95 | module.exports = TestLocation;


--------------------------------------------------------------------------------
/build/npm/lib/runRouter.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | var createRouter = require("./createRouter");
 4 | 
 5 | /**
 6 |  * A high-level convenience method that creates, configures, and
 7 |  * runs a router in one shot. The method signature is:
 8 |  *
 9 |  *   Router.run(routes[, location ], callback);
10 |  *
11 |  * Using `window.location.hash` to manage the URL, you could do:
12 |  *
13 |  *   Router.run(routes, function (Handler) {
14 |  *     React.render(<Handler/>, document.body);
15 |  *   });
16 |  * 
17 |  * Using HTML5 history and a custom "cursor" prop:
18 |  * 
19 |  *   Router.run(routes, Router.HistoryLocation, function (Handler) {
20 |  *     React.render(<Handler cursor={cursor}/>, document.body);
21 |  *   });
22 |  *
23 |  * Returns the newly created router.
24 |  *
25 |  * Note: If you need to specify further options for your router such
26 |  * as error/abort handling or custom scroll behavior, use Router.create
27 |  * instead.
28 |  *
29 |  *   var router = Router.create(options);
30 |  *   router.run(function (Handler) {
31 |  *     // ...
32 |  *   });
33 |  */
34 | function runRouter(routes, location, callback) {
35 |   if (typeof location === "function") {
36 |     callback = location;
37 |     location = null;
38 |   }
39 | 
40 |   var router = createRouter({
41 |     routes: routes,
42 |     location: location
43 |   });
44 | 
45 |   router.run(callback);
46 | 
47 |   return router;
48 | }
49 | 
50 | module.exports = runRouter;


--------------------------------------------------------------------------------
/build/npm/lib/supportsHistory.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | function supportsHistory() {
 4 |   /*! taken from modernizr
 5 |    * https://github.com/Modernizr/Modernizr/blob/master/LICENSE
 6 |    * https://github.com/Modernizr/Modernizr/blob/master/feature-detects/history.js
 7 |    * changed to avoid false negatives for Windows Phones: https://github.com/rackt/react-router/issues/586
 8 |    */
 9 |   var ua = navigator.userAgent;
10 |   if ((ua.indexOf("Android 2.") !== -1 || ua.indexOf("Android 4.0") !== -1) && ua.indexOf("Mobile Safari") !== -1 && ua.indexOf("Chrome") === -1 && ua.indexOf("Windows Phone") === -1) {
11 |     return false;
12 |   }
13 |   return window.history && "pushState" in window.history;
14 | }
15 | 
16 | module.exports = supportsHistory;


--------------------------------------------------------------------------------
/build/npm/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-router",
 3 |   "version": "0.13.1",
 4 |   "description": "A complete routing library for React.js",
 5 |   "main": "lib",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "https://github.com/rackt/react-router.git"
 9 |   },
10 |   "homepage": "https://github.com/rackt/react-router/blob/latest/README.md",
11 |   "bugs": "https://github.com/rackt/react-router/issues",
12 |   "authors": [
13 |     "Ryan Florence",
14 |     "Michael Jackson"
15 |   ],
16 |   "license": "MIT",
17 |   "peerDependencies": {
18 |     "react": "0.13.x"
19 |   },
20 |   "dependencies": {
21 |     "qs": "2.4.1",
22 |     "classnames": "1.1.x"
23 |   },
24 |   "tags": [
25 |     "react",
26 |     "router"
27 |   ],
28 |   "keywords": [
29 |     "react",
30 |     "react-component",
31 |     "routing",
32 |     "route",
33 |     "routes",
34 |     "router"
35 |   ]
36 | }
37 | 


--------------------------------------------------------------------------------
/docs/api/Location.md:
--------------------------------------------------------------------------------
 1 | API: `Location` (object)
 2 | ========================
 3 | 
 4 | The router uses "location" objects to determine the current state of
 5 | the application and update it when needed. In a browser environment,
 6 | the location represents the URL in the browser's location bar. On the
 7 | server, the location is the URL path that was used in the request.
 8 | 
 9 | ReactRouter ships with several locations that make it convenient to
10 | use in many different scenarios. They are listed below.
11 | 
12 | Location            | Description
13 | ------------------- | -----------
14 | `HashLocation`      | Stores the current URL in `window.location.hash`. Use this if you need to support browsers that don't support the HTML5 history API
15 | `HistoryLocation`   | Uses the HTML5 history API to store state in clean URLs
16 | `RefreshLocation`   | A fallback that uses clean URLs in browsers that do not support the HTML5 history API by updating `window.location` whenever the route changes. The router automatically falls back to this when you try to use `HistoryLocation` in old browsers
17 | `StaticLocation`    | A location for stateless environments (like servers) where the URL is given once
18 | `TestLocation`      | A location that allows you to easily stub out URL history when writing tests
19 | 
20 | You can also supply the router with your own location implementation. The
21 | following methods must be implemented:
22 | 
23 | Methods
24 | -------
25 | 
26 | ### `addChangeListener(listener)`
27 | 
28 | Adds a function to the location that should be called when it changes.
29 | 
30 | ### `removeChangeListener(listener)`
31 | 
32 | Stop calling the given function when the location changes.
33 | 
34 | ### `push`
35 | 
36 | Called when the router is transitioning from one path to another.
37 | 
38 | ### `replace`
39 | 
40 | Called when the router is replacing (not transitioning) one url with
41 | another.
42 | 
43 | ### `pop`
44 | 
45 | Called when the router attempts to go back one entry in the history.
46 | 
47 | ### `getCurrentPath`
48 | 
49 | Should return the current URL path, complete with query string (if applicable).
50 | This method should be ready to go immediately after setup.
51 | 
52 | ### `toString`
53 | 
54 | Should return a useful string for logging and debugging.
55 | 
56 | History
57 | -------
58 | 
59 | Additionally, location objects must:
60 | 
61 | - Increment `ReactRouter.History.length` immediately **after** the URL changes
62 | - Decrement `ReactRouter.History.length` immediately **before** going back to the
63 |   previous URL
64 | 
65 | Please refer to the [built-in location objects][locations] to get an idea for how this is done.
66 | 
67 | [locations]: /modules/locations
68 | 


--------------------------------------------------------------------------------
/docs/api/README.md:
--------------------------------------------------------------------------------
 1 | React Router API
 2 | ================
 3 | 
 4 | - [`Router.run`](/docs/api/run.md)
 5 | - [`Router.create`](/docs/api/create.md)
 6 | - [`Router Context`](/docs/api/RouterContext.md)
 7 | - [`Location`](/docs/api/Location.md)
 8 | - [`Transition`](/docs/api/Transition.md)
 9 | 
10 | - Renderable Components
11 |   - [`RouteHandler`](/docs/api/components/RouteHandler.md)
12 |   - [`Link`](/docs/api/components/Link.md)
13 | 
14 | - Configuration Components
15 |   - [`Route`](/docs/api/components/Route.md)
16 |   - [`DefaultRoute`](/docs/api/components/DefaultRoute.md)
17 |   - [`NotFoundRoute`](/docs/api/components/NotFoundRoute.md)
18 |   - [`Redirect`](/docs/api/components/Redirect.md)
19 | 
20 | - Mixins
21 |   - [`State`](/docs/api/mixins/State.md)
22 |   - [`Navigation`](/docs/api/mixins/Navigation.md)
23 | 
24 | Public Modules
25 | --------------
26 | 
27 | While there are many modules in this repository, only those found on the
28 | default export are considered public.
29 | 
30 | ```js
31 | var Router = require('react-router');
32 | var Link = Router.Link // yes
33 | var Link = require('react-router/components/Link') // no
34 | ```
35 | 


--------------------------------------------------------------------------------
/docs/api/Transition.md:
--------------------------------------------------------------------------------
 1 | API: `Transition` (object)
 2 | ==========================
 3 | 
 4 | A `Transition` object is sent to the [transition hooks][transition-hooks] as the
 5 | first argument.
 6 | 
 7 | Methods
 8 | -------
 9 | 
10 | ### `abort()`
11 | 
12 | Aborts a transition.
13 | 
14 | ### `redirect(to, params, query)`
15 | 
16 | Redirect to another route.
17 | 
18 | ### `retry()`
19 | 
20 | Retries a transition. Typically you save off a transition you care to
21 | return to, finish the workflow, then retry. This does not create a new
22 | entry in the browser history.
23 | 
24 |   [transition-hooks]:/docs/api/components/RouteHandler.md#static-lifecycle-methods
25 | 
26 | 


--------------------------------------------------------------------------------
/docs/api/components/DefaultRoute.md:
--------------------------------------------------------------------------------
 1 | API: `DefaultRoute` (component)
 2 | ===============================
 3 | 
 4 | A `<DefaultRoute>` is active when the parent route's path matches exactly.
 5 | 
 6 | Note, this is not a `<NotFoundRoute>`. It is only active when the parent's
 7 | route path is matched exactly.
 8 | 
 9 | Props
10 | -----
11 | 
12 | See [`<Route props>`][routeProps]
13 | 
14 | Example
15 | -------
16 | 
17 | ```xml
18 | <Route path="/" handler={App}>
19 | 
20 |   <!--
21 |     When the url is `/`, this route will be active. In other
22 |     words, `Home` will be the `<RouteHandler/>` in `App`.
23 |   -->
24 |   <DefaultRoute handler={Home}/>
25 | 
26 |   <Route name="about" handler={About}/>
27 |   <Route name="users" handler={Users}>
28 |     <Route name="user" handler={User} path="/user/:id"/>
29 | 
30 |     <!-- when the url is `/users`, this will be active -->
31 |     <DefaultRoute name="users-index" handler={UsersIndex}/>
32 | 
33 |   </Route>
34 | </Route>
35 | ```
36 | 
37 | This is all really just a shortcut for the less intuitive version of the
38 | same functionality:
39 | 
40 | ```xml
41 | <!-- don't do this -->
42 | 
43 | <!-- this route has a path but it'll never match directly because ... -->
44 | <Route path="/users" handler={Users}>
45 |   <!-- this child has the same path, and the child matches first -->
46 |   <Route name="users-index" path="/users" handler={UsersIndex}/>
47 |   <Route name="user" handler={User} path="/user/:id"/>
48 | </Route>
49 | ```
50 | 
51 |   [routeProps]:/docs/api/components/Route.md#props
52 | 


--------------------------------------------------------------------------------
/docs/api/components/Link.md:
--------------------------------------------------------------------------------
 1 | API: `Link` (component)
 2 | =========================
 3 | 
 4 | A `<Link>` renders an `<a>` tag that links to a route in the application. If
 5 | you change the path of your route, you don't also have to change your links.
 6 | 
 7 | A `<Link>` also knows when the route it links to is active and automatically
 8 | applies its `activeClassName` and/or `activeStyle` when it is.
 9 | 
10 | Props
11 | -----
12 | 
13 | ### `to`
14 | 
15 | The name of the route to link to, or a full URL.
16 | 
17 | ### `params`
18 | 
19 | An object of the names/values that correspond with dynamic segments in your route path.
20 | 
21 | #### Example
22 | 
23 | ```js
24 | // given a route config like this
25 | <Route name="user" path="/users/:userId"/>
26 | 
27 | // create a link with this
28 | <Link to="user" params={{userId: "123"}}/>
29 | 
30 | // though, if your user properties match up to the dynamic segements:
31 | <Link to="user" params={user}/>
32 | ```
33 | 
34 | ### `query`
35 | 
36 | The query string parameters as a JavaScript object.
37 | 
38 | ### `activeClassName`
39 | 
40 | The className a `Link` receives when its route is active. Defaults to `active`.
41 | 
42 | ### `activeStyle`
43 | 
44 | The styles to apply to the link element when its route is active.
45 | 
46 | ### `onClick`
47 | 
48 | A custom handler for the click event. Works just like a handler on an `<a>`
49 | tag - calling `e.preventDefault()` or returning `false` will prevent the
50 | transition from firing, while `e.stopPropagation()` will prevent the event
51 | from bubbling.
52 | 
53 | ### *others*
54 | 
55 | You can also pass props you'd like to be on the `<a>` such as a title, id, or className.
56 | 
57 | Example
58 | -------
59 | 
60 | Given a route like `<Route name="user" path="/users/:userId"/>`:
61 | 
62 | ```xml
63 | <Link to="user" params={{userId: user.id}} query={{foo: bar}}>{user.name}</Link>
64 | <!-- becomes one of these depending on your router and if the route is
65 | active -->
66 | <a href="/users/123?foo=bar" class="active">Michael</a>
67 | <a href="#/users/123?foo=bar">Michael</a>
68 | 
69 | <!-- or if you have the full url already, you can just pass that in -->
70 | <Link to="/users/123?foo=bar">{user.name}</Link>
71 | 
72 | <!-- change the activeClassName -->
73 | <Link activeClassName="current" to="user" params={{userId: user.id}}>{user.name}</Link>
74 | 
75 | <!-- change style when link is active -->
76 | <Link style={{color: 'white'}} activeStyle={{color: 'red'}} to="user" params={{userId: user.id}} query={{foo: bar}}>{user.name}</Link>
77 | ```
78 | 
79 | 


--------------------------------------------------------------------------------
/docs/api/components/NotFoundRoute.md:
--------------------------------------------------------------------------------
 1 | API: `NotFoundRoute` (component)
 2 | ===============================
 3 | 
 4 | A `<NotFoundRoute>` is active when the beginning of its parent's path
 5 | matches the URL but none of its siblings do. It can be found at any level
 6 | of your hierarchy, allowing you to have a context-aware "not found" page.
 7 | 
 8 | Props
 9 | -----
10 | 
11 | See [`<Route props>`][routeProps]
12 | 
13 | Example
14 | -------
15 | 
16 | ```xml
17 | <Route path="/" handler={App}>
18 |   <Route name="course" path="course/:courseId" handler={Course}>
19 |     <Route name="course-dashboard" path="dashboard" handler={Dashboard}/>
20 | 
21 |     <!-- ie: `/course/123/foo` -->
22 |     <NotFoundRoute handler={CourseRouteNotFound} />
23 |   </Route>
24 | 
25 |   <!-- ie: `/flkjasdf` -->
26 |   <NotFoundRoute handler={NotFound} />
27 | </Route>
28 | ```
29 | 
30 | The last `NotFoundRoute` will render inside the `App`, the first will
31 | rendering inside of `Course`.
32 | 
33 |   [routeProps]:/docs/api/components/Route.md#props
34 | 
35 | 


--------------------------------------------------------------------------------
/docs/api/components/Redirect.md:
--------------------------------------------------------------------------------
 1 | API: `Redirect` (component)
 2 | ===========================
 3 | 
 4 | A `<Redirect>` sets up a redirect to another route in your application. 
 5 | 
 6 | Props
 7 | -----
 8 | 
 9 | ### `from`
10 | 
11 | The path you want to redirect from, including dynamic segments. Defaults
12 | to `*` so you can redirect anything not found to somewhere else.
13 | 
14 | ### `to`
15 | 
16 | The `name` of the route you want to redirect to.
17 | 
18 | ### `params`
19 | 
20 | By default, the parameters will just pass through to the new route, but
21 | you can specify them if you need to (usually you shouldn't).
22 | 
23 | ### `query`
24 | 
25 | By default, the query parameters will just pass through to the new
26 | route, but you can specify them if you need to (usually you shouldn't).
27 | 
28 | Example
29 | -------
30 | 
31 | ```xml
32 | <!--
33 |   lets say we want to change from `/profile/123` to `/about/123`
34 |   and redirect `/get-in-touch` to `/contact`
35 | -->
36 | <Route handler={App}>
37 |   <Route name="contact" handler={Contact}/>
38 |   <Route name="about-user" path="about/:userId" handler={UserProfile}/>
39 |   <Route name="course" path="course/:courseId">
40 |     <Route name="course-dashboard" path="dashboard" handler={Dashboard}/>
41 |     <Route name="course-assignments" path="assignments" handler={Assignments}/>
42 |   </Route>
43 | 
44 |   <!-- `/get-in-touch` -> `/contact` -->
45 |   <Redirect from="get-in-touch" to="contact" />
46 | 
47 |   <!-- `/profile/123` -> `/about/123` -->
48 |   <Redirect from="profile/:userId" to="about-user" />
49 | 
50 |   <!-- `/profile/me` -> `/about-user/123` -->
51 |   <Redirect from="profile/me" to="about-user" params={{userId: SESSION.USER_ID}} />
52 | </Route>
53 | ```
54 | 
55 | Note that the `<Redirect/>` can be placed anywhere in the route
56 | hierarchy, if you'd prefer the redirects to be next to their respective
57 | routes, the `from` path will match the same as a regular route `path`.
58 | 
59 | ```xml
60 | <Route handler={App}>
61 |   <Route name="course" path="course/:courseId">
62 |     <Route name="course-dashboard" path="dashboard" handler={Dashboard}/>
63 |     <!-- /course/123/home -> /course/123/dashboard -->
64 |     <Redirect from="home" to="course-dashboard" />
65 |   </Route>
66 | </Route>
67 | ```
68 | 
69 | 


--------------------------------------------------------------------------------
/docs/api/components/Route.md:
--------------------------------------------------------------------------------
 1 | API: `Route` (component)
 2 | =========================
 3 | 
 4 | A `<Route>` is used to declare your application's routes and entry view hierarchy.
 5 | 
 6 | Props
 7 | -----
 8 | 
 9 | ### `name`
10 | 
11 | The unique name of the route, used in the `Link` component and the router's transition methods.
12 | 
13 | ### `path`
14 | 
15 | The path used in the URL. If left undefined, the path will be defined by
16 | the `name`, and if there is no name, will default to `/`.
17 | 
18 | Please refer to the [Path Matching Guide][path-matching] to learn more
19 | about supported path matching syntax.
20 | 
21 | ### `handler`
22 | 
23 | The component to be rendered when the route is active.
24 | 
25 | ### `children`
26 | 
27 | Routes can be nested. When a child route path matches, the parent route
28 | is also activated. Please refer to the [overview][overview] since this
29 | is a very critical part of the router's design.
30 | 
31 | ### `ignoreScrollBehavior`
32 | 
33 | When route or its `params` change, router adjusts window scroll position according to [`scrollBehavior`](https://github.com/rackt/react-router/blob/master/docs/api/create.md#scrollbehavior). This is generally desirable but you might want to opt out of scrolling adjustment for a specific route or a group of routes.
34 | 
35 | If you specify `ignoreScrollBehavior` attribute on a route, changes in `params` or any transitions within its `children` will not adjust scroll position. This can be useful on a search page or in a tabbed interface.
36 | 
37 | Note that changes in `query` never adjust scroll position, regardless of the value of this attribute.
38 | 
39 | Example
40 | -------
41 | 
42 | ```xml
43 | <!-- `path` defaults to '/' since no name or path provided -->
44 | <Route handler={App}>
45 |   <!-- path is automatically assigned to the name since it is omitted -->
46 |   <Route name="about" handler={About}/>
47 |   <Route name="users" handler={Users}>
48 |     <!--
49 |       note the dynamic segment in the path, and that it starts with `/`,
50 |       which makes it "absolute", or rather, it doesn't inherit the path
51 |       from the parent route
52 |     -->
53 |     <Route name="user" handler={User} path="/user/:id"/>
54 |   </Route>
55 | </Route>
56 | ```
57 | 
58 |   [overview]:/docs/guides/overview.md
59 |   [path-matching]:/docs/guides/path-matching.md
60 | 


--------------------------------------------------------------------------------
/docs/api/components/RouteHandler.md:
--------------------------------------------------------------------------------
 1 | API: `RouteHandler` (component)
 2 | ===============================
 3 | 
 4 | A `<RouteHandler>` renders the handler of the route at the level of the
 5 | route hierarchy in which it is used.
 6 | 
 7 | Router Context
 8 | --------------
 9 | 
10 | Router handlers are rendered with a router in their context with useful
11 | methods.
12 | 
13 | Please see [`Router Context`](/docs/api/RouterContext.md)
14 | 
15 | Static Lifecycle Methods
16 | ------------------------
17 | 
18 | You can define some static methods on your route handlers that will be
19 | called during route transitions.
20 | 
21 | ### `willTransitionTo(transition, params, query, callback)`
22 | 
23 | Called when a handler is about to render, giving you the opportunity to
24 | abort or redirect the transition. You can pause the transition while you
25 | do some asynchonous work and call `callback(error)` when you're done, or
26 | omit the callback in your argument list and it will be called for you.
27 | 
28 | See also: [Transition](/docs/api/Transition.md)
29 | 
30 | ### `willTransitionFrom(transition, component, callback)`
31 | 
32 | Called when an active route is being transitioned out giving you an
33 | opportunity to abort the transition. The `component` is the current
34 | component, you'll probably need it to check its state to decide if you
35 | want to allow the transition (like form fields).
36 | 
37 | See also: [Transition](/docs/api/Transition.md)
38 | 
39 | #### Example
40 | 
41 | ```js
42 | var Settings = React.createClass({
43 |   statics: {
44 |     willTransitionTo: function (transition, params) {
45 |       if (!auth.isLoggedIn()) {
46 |         transition.abort();
47 |         auth.logIn({transition: transition});
48 |         // in auth module call `transition.retry()` after being logged in
49 |       }
50 |     },
51 | 
52 |     willTransitionFrom: function (transition, component) {
53 |       if (component.formHasUnsavedData()) {
54 |         if (!confirm('You have unsaved information, are you sure you want to leave this page?')) {
55 |           transition.abort();
56 |         }
57 |       }
58 |     }
59 |   }
60 | 
61 |   //...
62 | });
63 | ```
64 | 
65 | 


--------------------------------------------------------------------------------
/docs/api/create.md:
--------------------------------------------------------------------------------
 1 | API: `Router.create`
 2 | ====================
 3 | 
 4 | Creates a router. Useful to pass around your app to be able to call
 5 | `transitionTo` and friends w/o being inside of a component.
 6 | 
 7 | Signature
 8 | ---------
 9 | 
10 | `Router.create(options)`
11 | 
12 | Options
13 | -------
14 | 
15 | ### routes
16 | 
17 | A set of routes.
18 | 
19 | ### location
20 | 
21 | The location to use.
22 | 
23 | ### scrollBehavior
24 | 
25 | The scroll behavior to use.
26 | 
27 | Methods
28 | -------
29 | 
30 | ### `run(callback)`
31 | 
32 | Runs the router, the same as the more common `Router.run` method.
33 | 
34 | Example
35 | -------
36 | 
37 | ```js
38 | // the more common API is
39 | Router.run(routes, Router.HistoryLocation, callback);
40 | 
41 | // which is just a shortcut for
42 | var router = Router.create({
43 |   routes: routes,
44 |   location: Router.HistoryLocation
45 | });
46 | router.run(callback);
47 | ```
48 | 


--------------------------------------------------------------------------------
/docs/api/mixins/Navigation.md:
--------------------------------------------------------------------------------
1 | API: `Navigation` (mixin)
2 | ==========================
3 | 
4 | Deprecated, please see [Router Context](/docs/api/RouterContext.md)
5 | 
6 | 


--------------------------------------------------------------------------------
/docs/api/mixins/State.md:
--------------------------------------------------------------------------------
1 | API: `State` (mixin)
2 | ==========================
3 | 
4 | Deprecated, please see [Router Context](/docs/api/RouterContext.md)
5 | 
6 | 
7 | 


--------------------------------------------------------------------------------
/docs/api/run.md:
--------------------------------------------------------------------------------
  1 | API: `Router.run`
  2 | =================
  3 | 
  4 | The main API into react router. It runs your routes, matching them
  5 | against a location, and then calls back with the next state for you to
  6 | render.
  7 | 
  8 | Signature
  9 | ---------
 10 | 
 11 | `Router.run(routes, [location,] callback)`
 12 | 
 13 | Arguments
 14 | ---------
 15 | 
 16 | ### `routes`
 17 | 
 18 | Your route config. See [Route][1]
 19 | 
 20 | ### `location` optional
 21 | 
 22 | Defaults to `Router.HashLocation`. If given a `Location` object, it
 23 | will setup and listen for changes on it, if given a string path, the
 24 | router will immediately match that path and callback.
 25 | 
 26 | #### Examples
 27 | 
 28 | ```js
 29 | // Defaults to `Router.HashLocation`
 30 | // callback is called whenever the hash changes
 31 | Router.run(routes, callback);
 32 | 
 33 | // HTML5 History
 34 | // callback is called when history events happen
 35 | Router.run(routes, Router.HistoryLocation, callback);
 36 | 
 37 | // Server rendering
 38 | // callback is called once, immediately.
 39 | Router.run(routes, '/some/path', callback);
 40 | ```
 41 | 
 42 | ### `callback(Handler, state)`
 43 | 
 44 | The callback receives two arguments:
 45 | 
 46 | 1. `Handler`
 47 | 2. `state`
 48 | 
 49 | #### `Handler`
 50 | 
 51 | A ReactComponent class with the current match all wrapped up inside it, ready
 52 | for you to render.
 53 | 
 54 | #### `state`
 55 | 
 56 | An object containing the matched state.
 57 | 
 58 | #### `state.path`
 59 | 
 60 | The current URL path with query string.
 61 | 
 62 | #### `state.action`
 63 | 
 64 | The action that lead to the route change.
 65 | 
 66 | #### `state.pathname`
 67 | 
 68 | The current URL path without the query string.
 69 | 
 70 | #### `state.params`
 71 | 
 72 | The active params in the location match.
 73 | 
 74 | #### `state.query`
 75 | 
 76 | The active query in the location match.
 77 | 
 78 | #### `state.routes`
 79 | 
 80 | An array of the matched [routes][1]. Very useful for fetching data before
 81 | rendering.
 82 | 
 83 | See also: [Route][1].
 84 | 
 85 | Examples
 86 | --------
 87 | 
 88 | Basic Usage:
 89 | 
 90 | ```js
 91 | Router.run(routes, function (Handler) {
 92 |   // whenever the url changes, this callback is called again
 93 |   React.render(<Handler/>, document.body);
 94 | });
 95 | ```
 96 | 
 97 | Sample data fetching using `state.routes`. Check out the
 98 | [async-data][2] example.
 99 | 
100 | ```js
101 | var resolveHash = require('when/keys').all;
102 | 
103 | var SampleHandler = React.createClass({
104 |   statics: {
105 |     // this is going to be called in the `run` callback
106 |     fetchData: function (params) {
107 |       return fetchStuff(params);
108 |     }
109 |   },
110 |   // ...
111 | });
112 | 
113 | Router.run(routes, Router.HistoryLocation, function (Handler, state) {
114 |   
115 |   // create the promises hash
116 |   var promises = state.routes.filter(function (route) {
117 |     // gather up the handlers that have a static `fetchData` method
118 |     return route.handler.fetchData;
119 |   }).reduce(function (promises, route) {
120 |     // reduce to a hash of `key:promise`
121 |     promises[route.name] = route.handler.fetchData(state.params);
122 |     return promises;
123 |   }, {});
124 | 
125 |   resolveHash(promises).then(function (data) {
126 |     // wait until we have data to render, the old screen stays up until
127 |     // we render
128 |     React.render(<Handler data={data}/>, document.body);
129 |   });
130 | });
131 | ```
132 | 
133 | Server Rendering
134 | 
135 | ```js
136 | something.serve(function (req, res) {
137 |   Router.run(routes, req.path, function (Handler, state) {
138 |     // could fetch data like in the previous example
139 |     fetchData(state.matches).then(function (data) {
140 |       var html = React.renderToString(<Handler data={data} />);
141 |       res.send(html);
142 |     });
143 |   });
144 | });
145 | ```
146 | 
147 |   [1]:./components/Route.md
148 |   [2]:https://github.com/rackt/react-router/tree/master/examples/async-data
149 | 
150 | 


--------------------------------------------------------------------------------
/docs/guides/flux.md:
--------------------------------------------------------------------------------
  1 | React Router in a Flux App
  2 | ==========================
  3 | 
  4 | Circular Dependencies in Actions
  5 | --------------------------------
  6 | 
  7 | Oftentimes your actions need to call `transitionTo` on the router, you
  8 | can't just require your router instance as a module into your actions
  9 | because your routes require views which also require the actions,
 10 | creating a cycle indirectly.
 11 | 
 12 | `router.js -> routes.js -> SomeComponent.js -> actions.js -> router.js`
 13 | 
 14 | To avoid this, you can do one of three things:
 15 | 
 16 | 1. Send the router context to the action:
 17 | 
 18 |     ```js
 19 |     var SomeActionCreators = require('./SomeActionCreators');
 20 |     var Something = React.createClass({
 21 |       handleClick () {
 22 |         SomeActionCreators.doStuff({ router: this.context.router });
 23 |       }
 24 |     });
 25 |     ```
 26 | 
 27 |    and then in `SomeActionCreators.doStuff` call
 28 |    `payload.router.transitionTo(...)`
 29 | 
 30 | 2. Use some sort of application container, or module container for the
 31 |    router instance.
 32 | 
 33 |     ```js
 34 |     // RouterContainer.js
 35 |     var _router = null;
 36 |     exports.set(router => _router = router);
 37 |     exports.get(() => _router);
 38 |     ```
 39 | 
 40 |     ```js
 41 |     // main bootstrap file, like main.js or whatever
 42 |     var RouterContainer = require('./RouterContainer');
 43 |     var routes = require('./routes');
 44 |     RouterContainer.set(Router.create({ routes }));
 45 |     ```
 46 | 
 47 |    and then in your `ActionCreators.js`
 48 | 
 49 |     ```js
 50 |     var RouterContainer = require('./RouterContainer');
 51 |     exports.doStuff = (payload) => {
 52 |       // stuff
 53 |       RouterContainer.get().transitionTo(...);
 54 |     }
 55 |     ```
 56 | 
 57 | 3. Proxy calls to `router` instance and export the proxy early so action creators can `require` it.
 58 | 
 59 |     ```js
 60 |      // router.js
 61 |      // The trick is to assign module.exports before any require()s
 62 | 
 63 |      var router;
 64 | 
 65 |      module.exports = {
 66 |       makePath(to, params, query) {
 67 |         return router.makePath(to, params, query);
 68 |       },
 69 | 
 70 |       makeHref(to, params, query) {
 71 |         return router.makeHref(to, params, query);
 72 |       },
 73 | 
 74 |       transitionTo(to, params, query) {
 75 |         router.transitionTo(to, params, query);
 76 |       },
 77 | 
 78 |       replaceWith(to, params, query) {
 79 |         router.replaceWith(to, params, query);
 80 |       },
 81 | 
 82 |       goBack() {
 83 |         router.goBack();
 84 |       },
 85 | 
 86 |       run(render) {
 87 |         router.run(render);
 88 |       }
 89 |     };
 90 | 
 91 |     // By the time route config is require()-d,
 92 |     // require('./router') already returns a valid object
 93 | 
 94 |     var routes = require('./routes'),
 95 |         Router = require('react-router');
 96 | 
 97 |     router = Router.create({
 98 |       routes: routes,
 99 |       location: Router.HistoryLocation
100 |     });
101 |     ```
102 | 
103 |    and then in your `ActionCreators.js`
104 | 
105 |     ```js
106 |     var router = require('./router');
107 |     exports.doStuff = (payload) => {
108 |       // stuff
109 |       router.transitionTo(...);
110 |     }
111 |     ```
112 | 
113 | Accessing route and params from action creators
114 | -----------------------------------------------
115 | 
116 | You can create your own `RouterStore` and fire an action in `run` callback:
117 | 
118 | ```js
119 | Router.run(routes, (Handler, state) => {
120 |   ActionCreators.changeRoute({ state });
121 |   React.render(<Handler/>, document.body);
122 | });
123 | ```
124 | 
125 | Let `RouterStore` keep router state and add a public method to obtain it.  
126 | This way your action creators and other stores can learn about current router state.
127 | 
128 | Handling route changes as actions
129 | ---------------------------------
130 | 
131 | If you'd like to handle route changes as actions, it could look
132 | something like this:
133 | 
134 | ```js
135 | Router.run(routes, (Handler, state) => {
136 |   ActionCreators.changeRoute({ Handler, state });
137 | });
138 | ```
139 | 
140 | ```js
141 | // ActionCreators.js
142 | exports.changeRoute = (payload) => {
143 |   var { Handler } = payload;
144 |   React.render(<Handler/>, document.body);
145 | };
146 | ```
147 | 
148 | This is not how we use the router with flux, but to each their own.
149 | 
150 | 


--------------------------------------------------------------------------------
/docs/guides/path-matching.md:
--------------------------------------------------------------------------------
  1 | Path Matching
  2 | =============
  3 | 
  4 | Relative v. Absolute Paths
  5 | --------------------------
  6 | 
  7 | Paths that start with `/` are absolute. Paths that don't start with `/` are
  8 | relative and extend their parent's path.
  9 | 
 10 | ```xml
 11 | <Route path="/">
 12 |   <!-- /courses/123 -->
 13 |   <Route path="courses/:courseId">
 14 |     <!-- /courses/123/anouncements -->
 15 |     <Route path="announcements" />
 16 |     <!-- /courses/123/dashboard -->
 17 |     <Route path="dashboard" />
 18 |   </Route>
 19 |   <!-- /inbox -->
 20 |   <Route path="inbox">
 21 |     <!-- /messages/123 -->
 22 |     <Route path="/messages/:messageId"/>
 23 |   </Route>
 24 | </Route>
 25 | ```
 26 | 
 27 | Absolute paths allow you to use any URL you want while maintaining the
 28 | automatic view nesting of the router.
 29 | 
 30 | Dynamic Segments
 31 | ----------------
 32 | 
 33 | Dynamic segments are defined with a `:`, like `:userId`. They will be
 34 | parsed and available by name in your route handler on
 35 | `this.props.params`. They match most characters except `/ ? #`.
 36 | 
 37 | Splats
 38 | ------
 39 | 
 40 | Splats are defined with `*` and will non-greedily match anything. The
 41 | value will be available in your route handler as
 42 | `this.props.params.splat`. If there are multiple, you'll get an array of
 43 | values.
 44 | 
 45 | Question Mark
 46 | -------------
 47 | 
 48 | Question marks will optionally match the preceding segment.
 49 | 
 50 | Examples
 51 | --------
 52 | 
 53 | ```
 54 | path: /file/:name
 55 | matches:
 56 |   /file/foo.js
 57 |     this.props.params: {name: 'foo.js'}
 58 | does not match:
 59 |   /file/quux/baz.gif
 60 |   /file/
 61 |   /file
 62 | 
 63 | path: /file/:name?
 64 | matches:
 65 |   /file/foo.js
 66 |     this.props.params: {name: 'foo.js'}
 67 |   /file/
 68 |     this.props.params: {}
 69 | does not match:
 70 |   /file
 71 |   /file/quux/baz.js
 72 | 
 73 | path: /file/?:name?
 74 | matches:
 75 |   /file/foo.js
 76 |     this.props.params: {name: 'foo.js'}
 77 |   /file/
 78 |     this.props.params: {}
 79 |   /file
 80 |     this.props.params: {}
 81 | does not match:
 82 |   /file/quux/baz.js
 83 | 
 84 | path: /file/*
 85 | matches:
 86 |   /file/foo.js
 87 |     this.props.params: {splat: 'foo.js'}
 88 |   /file/foo.bar.js
 89 |     this.props.params: {splat: 'foo.bar.js'}
 90 |   /file/quux/baz.js
 91 |     this.props.params: {splat: 'quux/baz.js'}
 92 | 
 93 | path: /foo/*/:bar/?*?
 94 | matches:
 95 |   /foo/a.b.c/taco/def
 96 |     this.props.params: {bar: 'taco', splat: ['a.b.c', 'def']}
 97 |   /foo/a.b.c/taco
 98 |     this.props.params: {bar: 'taco', splat: 'a.b.c'}
 99 | does not match:
100 |   /foo/a.b.c
101 | 
102 | path: *
103 | matches everything, but you probably want `<NotFoundRoute/>`
104 | ```
105 | 
106 | 


--------------------------------------------------------------------------------
/docs/guides/server-rendering.md:
--------------------------------------------------------------------------------
 1 | Server Rendering
 2 | ================
 3 | 
 4 | Server rendering of your app with react router is no different than
 5 | anything else, really, you just pass in the requested path to
 6 | `Router.run` and then use `React.renderToString` instead of
 7 | `React.render`.
 8 | 
 9 | ```js
10 | var App = React.createClass({
11 |   render: function () {
12 |     return <div>Hi</div>;
13 |   }
14 | });
15 | 
16 | var routes = (
17 |   <Route handler={App} path="/" />
18 | );
19 | 
20 | // if using express it might look like this
21 | app.use(function (req, res) {
22 |   // pass in `req.url` and the router will immediately match
23 |   Router.run(routes, req.url, function (Handler) {
24 |     var content = React.renderToString(<Handler/>);
25 |     res.render('main', {content: content});
26 |   });
27 | });
28 | ```
29 | 
30 | We'll add some more here soon, but for the adventurous few, this ought
31 | to get you started.
32 | 
33 | 


--------------------------------------------------------------------------------
/docs/guides/testing.md:
--------------------------------------------------------------------------------
  1 | React Router Testing
  2 | ====================
  3 | 
  4 | Because the router relies heavily on the lesser known `context` feature
  5 | of React, it can be a pain in the neck to test your components that have
  6 | things like `<Link>` or rely on `this.context.router`.
  7 | 
  8 | You simply have to stub out the context you need.
  9 | 
 10 | ```js
 11 | // this will yell at you if you have `<Link>` and friends
 12 | React.render(<IndividualComponent/>, testElement);
 13 | ```
 14 | 
 15 | You'll get something like:
 16 | 
 17 | ```
 18 | "Warning: Required context `router` was not specified in `Link`. Check the render method of `IndividualComponent`."
 19 | ```
 20 | 
 21 | So we can just wrap up the thing we want to test in a different
 22 | component and stub out the `context` stuff.
 23 | 
 24 | ```js
 25 | // wrap it up first:
 26 | var TestWrapper = React.createClass({
 27 |   childContextTypes: {
 28 |     router: React.PropTypes.object
 29 |   },
 30 | 
 31 |   getChildContext () {
 32 |     return router: {
 33 |         makePath () {},
 34 |         makeHref () {},
 35 |         isActive () {},
 36 |         // and whichever router methods your component uses
 37 |       }
 38 |     };
 39 |   },
 40 | 
 41 |   render () {
 42 |     return <IndividualComponent/>
 43 |   }
 44 | });
 45 | 
 46 | // okay, now it'll work:
 47 | React.render(<TestWrapper/>, testElement);
 48 | ```
 49 | 
 50 | This is handy because now you can force the code down certain paths if
 51 | you add some behavior to the stubbed context. But It's also a lot of junk to
 52 | write.
 53 | 
 54 | `stubRouterContext`
 55 | -------------------
 56 | 
 57 | Copy/paste this helper into your test utils to make things a bit easier:
 58 | 
 59 | ```js
 60 | var stubRouterContext = (Component, props, stubs) => {
 61 |   return React.createClass({
 62 |     childContextTypes: {
 63 |       router: object
 64 |     },
 65 | 
 66 |     getChildContext () {
 67 |       return {
 68 |         router: Object.assign({
 69 |           makePath () {},
 70 |           makeHref () {},
 71 |           transitionTo () {},
 72 |           replaceWith () {},
 73 |           goBack () {},
 74 |           getCurrentPath () {},
 75 |           getCurrentRoutes () {},
 76 |           getCurrentPathname () {},
 77 |           getCurrentParams () {},
 78 |           getCurrentQuery () {},
 79 |           isActive () {},
 80 |         }, stubs)
 81 |       };
 82 |     },
 83 | 
 84 |     render () {
 85 |       return <Component {...props} />
 86 |     }
 87 |   });
 88 | };
 89 | ```
 90 | 
 91 | Now your tests are much simpler:
 92 | 
 93 | ```js
 94 | var stubRouterContext = require('./stubRouterContext');
 95 | var IndividualComponent = require('./IndividualComponent');
 96 | var Subject = stubRouterContext(IndividualComponent, {someProp: 'foo'});
 97 | React.render(<Subject/>, testElement);
 98 | ```
 99 | 
100 | You can also send code down certain paths if you'd like by supplying
101 | behavior to the stubbed context:
102 | 
103 | ```js
104 | var Subject = stubRouterContext(IndividualComponent, {prop: 'foo'}, {
105 |   getCurrentQuery () {
106 |     return { modal: true };
107 |   }
108 | });
109 | ```
110 | 
111 | Now your test will think it got `?modal=true` in the URL, even though
112 | there is no URL in the test.
113 | 
114 | Why is `stubRouterContext` not in the project?
115 | ----------------------------------------------
116 | 
117 | I dunno.
118 | 
119 | 


--------------------------------------------------------------------------------
/examples/README.md:
--------------------------------------------------------------------------------
 1 | React Router Examples
 2 | =====================
 3 | 
 4 | To run and development examples:
 5 | 
 6 | 1. Clone this repo
 7 | 2. Run `npm install`
 8 | 3. Start the development server with `npm run examples`
 9 | 4. Point your browser to http://localhost:8080
10 | 


--------------------------------------------------------------------------------
/examples/animations/app.css:
--------------------------------------------------------------------------------
 1 | .Image {
 2 |   position: absolute;
 3 |   height: 400px;
 4 |   width: 400px;
 5 | }
 6 | 
 7 | .example-enter {
 8 |   opacity: 0.01;
 9 |   transition: opacity .5s ease-in;
10 | }
11 | 
12 | .example-enter.example-enter-active {
13 |   opacity: 1;
14 | }
15 | 
16 | .example-leave {
17 |   opacity: 1;
18 |   transition: opacity .5s ease-in;
19 | }
20 | 
21 | .example-leave.example-leave-active {
22 |   opacity: 0.01;
23 | }
24 | 


--------------------------------------------------------------------------------
/examples/animations/app.js:
--------------------------------------------------------------------------------
 1 | var React = require('react');
 2 | var TransitionGroup = require('react/lib/ReactCSSTransitionGroup');
 3 | var Router = require('react-router');
 4 | var { Route, RouteHandler, Link } = Router;
 5 | 
 6 | var App = React.createClass({
 7 | 
 8 |   contextTypes: {
 9 |     router: React.PropTypes.func
10 |   },
11 | 
12 |   render: function () {
13 |     var name = this.context.router.getCurrentPath();
14 |     return (
15 |       <div>
16 |         <ul>
17 |           <li><Link to="page1">Page 1</Link></li>
18 |           <li><Link to="page2">Page 2</Link></li>
19 |         </ul>
20 |         <TransitionGroup component="div" transitionName="example">
21 |           <RouteHandler key={name}/>
22 |         </TransitionGroup>
23 |       </div>
24 |     );
25 |   }
26 | });
27 | 
28 | var Page1 = React.createClass({
29 |   render: function () {
30 |     return (
31 |       <div className="Image">
32 |         <h1>Page 1</h1>
33 |         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
34 |       </div>
35 |     );
36 |   }
37 | });
38 | 
39 | var Page2 = React.createClass({
40 |   render: function () {
41 |     return (
42 |       <div className="Image">
43 |         <h1>Page 2</h1>
44 |         <p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
45 |       </div>
46 |     );
47 |   }
48 | });
49 | 
50 | var routes = (
51 |   <Route handler={App}>
52 |     <Route name="page1" handler={Page1} />
53 |     <Route name="page2" handler={Page2} />
54 |   </Route>
55 | );
56 | 
57 | Router.run(routes, function (Handler) {
58 |   React.render(<Handler/>, document.getElementById('example'));
59 | });
60 | 


--------------------------------------------------------------------------------
/examples/animations/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html public "restroom">
 2 | <title>Animation Example</title>
 3 | <link href="../global.css" rel="stylesheet"/>
 4 | <link href="app.css" rel="stylesheet"/>
 5 | <body>
 6 | <h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Animations</h1>
 7 | <div id="example"/>
 8 | <script src="/__build__/shared.js"></script>
 9 | <script src="/__build__/animations.js"></script>
10 | 


--------------------------------------------------------------------------------
/examples/async-data/app.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   font-family: "Helvetica Neue", Arial;
 3 |   font-weight: 200;
 4 | }
 5 | 
 6 | a {
 7 |   color: hsl(200, 50%, 50%);
 8 | }
 9 | 
10 | a.active {
11 |   color: hsl(20, 50%, 50%);
12 | }
13 | 
14 | .loading {
15 |   opacity: 0.5;
16 | }
17 | 
18 | #example {
19 |   position: absolute;
20 | }
21 | 
22 | .App {
23 |   position: absolute;
24 |   top: 0;
25 |   left: 0;
26 |   right: 0;
27 |   bottom: 0;
28 |   width: 500px;
29 |   height: 500px;
30 | }
31 | 
32 | .ContactList {
33 |   position: absolute;
34 |   left: 0;
35 |   top: 0;
36 |   bottom: 0;
37 |   width: 300px;
38 |   overflow: auto;
39 |   padding: 20px;
40 | }
41 | 
42 | .Content {
43 |   position: absolute;
44 |   left: 300px;
45 |   top: 0;
46 |   bottom: 0;
47 |   right: 0;
48 |   border-left: 1px solid #ccc;
49 |   overflow: auto;
50 |   padding: 40px;
51 | }
52 | 
53 | 


--------------------------------------------------------------------------------
/examples/async-data/app.js:
--------------------------------------------------------------------------------
  1 | var React = require('react');
  2 | var Router = require('react-router');
  3 | var EventEmitter = require('events').EventEmitter;
  4 | var { Route, DefaultRoute, RouteHandler, Link } = Router;
  5 | 
  6 | var API = 'http://addressbook-api.herokuapp.com';
  7 | var loadingEvents = new EventEmitter();
  8 | 
  9 | function getJSON(url) {
 10 |   if (getJSON._cache[url])
 11 |     return Promise.resolve(getJSON._cache[url]);
 12 | 
 13 |   return new Promise((resolve, reject) => {
 14 |     var req = new XMLHttpRequest();
 15 |     req.onload = function () {
 16 |       if (req.status === 404) {
 17 |         reject(new Error('not found'));
 18 |       } else {
 19 |         // fake a slow response every now and then
 20 |         setTimeout(function () {
 21 |           var data = JSON.parse(req.response);
 22 |           resolve(data);
 23 |           getJSON._cache[url] = data;
 24 |         }, Math.random() > 0.5 ? 0 : 1000);
 25 |       }
 26 |     };
 27 |     req.open('GET', url);
 28 |     req.send();
 29 |   });
 30 | }
 31 | getJSON._cache = {};
 32 | 
 33 | var App = React.createClass({
 34 | 
 35 |   statics: {
 36 |     fetchData (params) {
 37 |       return getJSON(`${API}/contacts`).then((res) => res.contacts);
 38 |     }
 39 |   },
 40 | 
 41 |   getInitialState () {
 42 |     return { loading: false };
 43 |   },
 44 | 
 45 |   componentDidMount () {
 46 |     var timer;
 47 |     loadingEvents.on('loadStart', () => {
 48 |       clearTimeout(timer);
 49 |       // for slow responses, indicate the app is thinking
 50 |       // otherwise its fast enough to just wait for the
 51 |       // data to load
 52 |       timer = setTimeout(() => {
 53 |         this.setState({ loading: true });
 54 |       }, 300);
 55 |     });
 56 | 
 57 |     loadingEvents.on('loadEnd', () => {
 58 |       clearTimeout(timer);
 59 |       this.setState({ loading: false });
 60 |     });
 61 |   },
 62 | 
 63 |   renderContacts () {
 64 |     return this.props.data.contacts.map((contact, i) => {
 65 |       return (
 66 |         <li key={i}>
 67 |           <Link to="contact" params={contact}>{contact.first} {contact.last}</Link>
 68 |         </li>
 69 |       );
 70 |     });
 71 |   },
 72 | 
 73 |   render () {
 74 |     return (
 75 |       <div className={this.state.loading ? 'loading' : ''}>
 76 |         <ul>
 77 |           {this.renderContacts()}
 78 |         </ul>
 79 |         <RouteHandler {...this.props}/>
 80 |       </div>
 81 |     );
 82 |   }
 83 | });
 84 | 
 85 | var Contact = React.createClass({
 86 |   statics: {
 87 |     fetchData (params) {
 88 |       return getJSON(`${API}/contacts/${params.id}`).then((res) => res.contact);
 89 |     }
 90 |   },
 91 | 
 92 |   render () {
 93 |     var { contact } = this.props.data;
 94 |     return (
 95 |       <div>
 96 |         <p><Link to="/">Back</Link></p>
 97 |         <h1>{contact.first} {contact.last}</h1>
 98 |         <img key={contact.avatar} src={contact.avatar}/>
 99 |       </div>
100 |     );
101 |   }
102 | });
103 | 
104 | var Index = React.createClass({
105 |   render () {
106 |     return (
107 |       <div>
108 |         <h1>Welcome!</h1>
109 |       </div>
110 |     );
111 |   }
112 | });
113 | 
114 | var routes = (
115 |   <Route name="contacts" path="/" handler={App}>
116 |     <DefaultRoute name="index" handler={Index}/>
117 |     <Route name="contact" path="contact/:id" handler={Contact}/>
118 |   </Route>
119 | );
120 | 
121 | function fetchData(routes, params) {
122 |   var data = {};
123 |   return Promise.all(routes
124 |     .filter(route => route.handler.fetchData)
125 |     .map(route => {
126 |       return route.handler.fetchData(params).then(d => {data[route.name] = d;});
127 |     })
128 |   ).then(() => data);
129 | }
130 | 
131 | Router.run(routes, function (Handler, state) {
132 |   loadingEvents.emit('loadStart');
133 | 
134 |   fetchData(state.routes, state.params).then((data) => {
135 |     loadingEvents.emit('loadEnd');
136 |     React.render(<Handler data={data}/>, document.getElementById('example'));
137 |   });
138 | });
139 | 


--------------------------------------------------------------------------------
/examples/async-data/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html public "embarassment">
 2 | <title>Master Detail Example</title>
 3 | <link href="../global.css" rel="stylesheet"/>
 4 | <link href="app.css" rel="stylesheet"/>
 5 | <body>
 6 | <h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Async Data</h1>
 7 | <div id="example"/>
 8 | <script src="/__build__/shared.js"></script>
 9 | <script src="/__build__/async-data.js"></script>
10 | 
11 | 


--------------------------------------------------------------------------------
/examples/auth-flow/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html public "display of affection">
 2 | <title>Authentication Flow Example</title>
 3 | <link rel="stylesheet" href="../global.css"/>
 4 | <body>
 5 | <h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Auth Flow</h1>
 6 | <div id="example"/>
 7 | <script src="/__build__/shared.js"></script>
 8 | <script src="/__build__/auth-flow.js"></script>
 9 | 
10 | 


--------------------------------------------------------------------------------
/examples/data-flow/app.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   font-family: "Helvetica Neue", Arial;
 3 |   font-weight: 200;
 4 | }
 5 | 
 6 | a {
 7 |   color: hsl(200, 50%, 50%);
 8 | }
 9 | 
10 | a.active {
11 |   color: hsl(20, 50%, 50%);
12 | }
13 | 
14 | #example {
15 |   position: absolute;
16 | }
17 | 
18 | .App {
19 |   position: absolute;
20 |   top: 0;
21 |   left: 0;
22 |   right: 0;
23 |   bottom: 0;
24 |   width: 500px;
25 |   height: 500px;
26 | }
27 | 
28 | .Master {
29 |   position: absolute;
30 |   left: 0;
31 |   top: 0;
32 |   bottom: 0;
33 |   width: 300px;
34 |   overflow: auto;
35 |   padding: 10px 40px;
36 | }
37 | 
38 | .Detail {
39 |   position: absolute;
40 |   left: 300px;
41 |   top: 0;
42 |   bottom: 0;
43 |   right: 0;
44 |   border-left: 1px solid #ccc;
45 |   overflow: auto;
46 |   padding: 40px;
47 | }
48 | 
49 | 


--------------------------------------------------------------------------------
/examples/data-flow/app.js:
--------------------------------------------------------------------------------
 1 | var React = require('react');
 2 | var Router = require('react-router');
 3 | var { Route, RouteHandler, Link } = Router;
 4 | 
 5 | var App = React.createClass({
 6 | 
 7 |   contextTypes: {
 8 |     router: React.PropTypes.func
 9 |   },
10 | 
11 |   getInitialState: function () {
12 |     return {
13 |       tacos: [
14 |         { name: 'duck confit' },
15 |         { name: 'carne asada' },
16 |         { name: 'shrimp' }
17 |       ]
18 |     };
19 |   },
20 | 
21 |   addTaco: function () {
22 |     var name = prompt('taco name?');
23 |     this.setState({
24 |       tacos: this.state.tacos.concat({name: name})
25 |     });
26 |   },
27 | 
28 |   handleRemoveTaco: function (removedTaco) {
29 |     var tacos = this.state.tacos.filter(function (taco) {
30 |       return taco.name != removedTaco;
31 |     });
32 |     this.setState({tacos: tacos});
33 |     this.context.router.transitionTo('/');
34 |   },
35 | 
36 |   render: function () {
37 |     var links = this.state.tacos.map(function (taco, i) {
38 |       return (
39 |         <li key={i}>
40 |           <Link to="taco" params={taco}>{taco.name}</Link>
41 |         </li>
42 |       );
43 |     });
44 |     return (
45 |       <div className="App">
46 |         <button onClick={this.addTaco}>Add Taco</button>
47 |         <ul className="Master">
48 |           {links}
49 |         </ul>
50 |         <div className="Detail">
51 |           <RouteHandler onRemoveTaco={this.handleRemoveTaco}/>
52 |         </div>
53 |       </div>
54 |     );
55 |   }
56 | });
57 | 
58 | var Taco = React.createClass({
59 | 
60 |   contextTypes: {
61 |     router: React.PropTypes.func
62 |   },
63 | 
64 |   remove: function () {
65 |     this.props.onRemoveTaco(this.context.router.getCurrentParams().name);
66 |   },
67 | 
68 |   render: function () {
69 |     return (
70 |       <div className="Taco">
71 |         <h1>{this.context.router.getCurrentParams().name}</h1>
72 |         <button onClick={this.remove}>remove</button>
73 |       </div>
74 |     );
75 |   }
76 | });
77 | 
78 | var routes = (
79 |   <Route handler={App}>
80 |     <Route name="taco" path="taco/:name" handler={Taco}/>
81 |   </Route>
82 | );
83 | 
84 | Router.run(routes, function (Handler) {
85 |   React.render(<Handler/>, document.getElementById('example'));
86 | });
87 | 


--------------------------------------------------------------------------------
/examples/data-flow/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html public "embarassment">
 2 | <title>Data Flow Example</title>
 3 | <link href="../global.css" rel="stylesheet"/>
 4 | <link href="app.css" rel="stylesheet"/>
 5 | <body>
 6 | <h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Data Flow</h1>
 7 | <div id="example"/>
 8 | <script src="/__build__/shared.js"></script>
 9 | <script src="/__build__/data-flow.js"></script>
10 | 
11 | 


--------------------------------------------------------------------------------
/examples/dynamic-segments/app.js:
--------------------------------------------------------------------------------
 1 | var React = require('react');
 2 | var Router = require('react-router');
 3 | var { Route, Redirect, RouteHandler, Link } = Router;
 4 | 
 5 | var App = React.createClass({
 6 |   render () {
 7 |     return (
 8 |       <div>
 9 |         <ul>
10 |           <li><Link to="user" params={{userId: "123"}}>Bob</Link></li>
11 |           <li><Link to="user" params={{userId: "abc"}}>Sally</Link></li>
12 |         </ul>
13 |         <RouteHandler/>
14 |       </div>
15 |     );
16 |   }
17 | });
18 | 
19 | var User = React.createClass({
20 | 
21 |   contextTypes: {
22 |     router: React.PropTypes.func
23 |   },
24 | 
25 |   render () {
26 |     var { userId } = this.context.router.getCurrentParams();
27 |     return (
28 |       <div className="User">
29 |         <h1>User id: {userId}</h1>
30 |         <ul>
31 |           <li><Link to="task" params={{userId: userId, taskId: "foo"}}>foo task</Link></li>
32 |           <li><Link to="task" params={{userId: userId, taskId: "bar"}}>bar task</Link></li>
33 |         </ul>
34 |         <RouteHandler/>
35 |       </div>
36 |     );
37 |   }
38 | });
39 | 
40 | 
41 | var Task = React.createClass({
42 | 
43 |   contextTypes: {
44 |     router: React.PropTypes.func
45 |   },
46 | 
47 |   render () {
48 |     var { userId, taskId } = this.context.router.getCurrentParams();
49 |     return (
50 |       <div className="Task">
51 |         <h2>User id: {userId}</h2>
52 |         <h3>Task id: {taskId}</h3>
53 |       </div>
54 |     );
55 |   }
56 | });
57 | 
58 | var routes = (
59 |   <Route path="/" handler={App}>
60 |     <Route name="user" path="/user/:userId" handler={User}>
61 |       <Route name="task" path="tasks/:taskId" handler={Task}/>
62 |       <Redirect from="todos/:taskId" to="task"/>
63 |     </Route>
64 |   </Route>
65 | );
66 | 
67 | Router.run(routes, function (Handler) {
68 |   React.render(<Handler/>, document.getElementById('example'));
69 | });
70 | 


--------------------------------------------------------------------------------
/examples/dynamic-segments/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html public "restroom">
 2 | <title>Dynamic Segments Example</title>
 3 | <link href="../global.css" rel="stylesheet"/>
 4 | <body>
 5 | <h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Dynamic Segments</h1>
 6 | <div id="example"/>
 7 | <script src="/__build__/shared.js"></script>
 8 | <script src="/__build__/dynamic-segments.js"></script>
 9 | 
10 | 


--------------------------------------------------------------------------------
/examples/global.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   font-family: "Helvetica Neue", Arial;
 3 |   font-weight: 200;
 4 | }
 5 | 
 6 | h1, h2, h3 {
 7 |   font-weight: 100;
 8 | }
 9 | 
10 | a {
11 |   color: hsl(200, 50%, 50%);
12 | }
13 | 
14 | a.active {
15 |   color: hsl(20, 50%, 50%);
16 | }
17 | 
18 | .breadcrumbs a {
19 |   text-decoration: none;
20 | }
21 | 


--------------------------------------------------------------------------------
/examples/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>React Router Examples</title>
 3 | <link href="global.css" rel="stylesheet"/>
 4 | <body>
 5 | <h1>React Router Examples</h1>
 6 | <ul>
 7 | <li><a href="animations/index.html">Animations</a></li>
 8 | <li><a href="async-data/index.html">Async Data</a></li>
 9 | <li><a href="auth-flow/index.html">Auth Flow</a></li>
10 | <li><a href="data-flow/index.html">Data Flow</a></li>
11 | <li><a href="dynamic-segments/index.html">Dynamic Segments</a></li>
12 | <li><a href="master-detail/index.html">Master Detail</a></li>
13 | <li><a href="partial-app-loading/index.html">Partial App Loading</a></li>
14 | <li><a href="query-params/index.html">Query Params</a></li>
15 | <li><a href="rx/index.html">Reactive Extensions</a></li>
16 | <li><a href="shared-root/index.html">Shared Root</a></li>
17 | <li><a href="sidebar/index.html">Sidebar</a></li>
18 | <li><a href="simple-master-detail/index.html">Simple Master Detail</a></li>
19 | <li><a href="transitions/index.html">Transitions</a></li>
20 | </ul>
21 | 


--------------------------------------------------------------------------------
/examples/master-detail/ContactStore.js:
--------------------------------------------------------------------------------
 1 | var API = 'http://addressbook-api.herokuapp.com/contacts';
 2 | var _contacts = {};
 3 | var _changeListeners = [];
 4 | var _initCalled = false;
 5 | 
 6 | var ContactStore = module.exports = {
 7 | 
 8 |   init: function () {
 9 |     if (_initCalled)
10 |       return;
11 | 
12 |     _initCalled = true;
13 | 
14 |     getJSON(API, function (err, res) {
15 |       res.contacts.forEach(function (contact) {
16 |         _contacts[contact.id] = contact;
17 |       });
18 | 
19 |       ContactStore.notifyChange();
20 |     });
21 |   },
22 | 
23 |   addContact: function (contact, cb) {
24 |     postJSON(API, { contact: contact }, function (res) {
25 |       _contacts[res.contact.id] = res.contact;
26 |       ContactStore.notifyChange();
27 |       if (cb) cb(res.contact);
28 |     });
29 |   },
30 | 
31 |   removeContact: function (id, cb) {
32 |     deleteJSON(API + '/' + id, cb);
33 |     delete _contacts[id];
34 |     ContactStore.notifyChange();
35 |   },
36 | 
37 |   getContacts: function () {
38 |     var array = [];
39 | 
40 |     for (var id in _contacts)
41 |       array.push(_contacts[id]);
42 | 
43 |     return array;
44 |   },
45 | 
46 |   getContact: function (id) {
47 |     return _contacts[id];
48 |   },
49 | 
50 |   notifyChange: function () {
51 |     _changeListeners.forEach(function (listener) {
52 |       listener();
53 |     });
54 |   },
55 | 
56 |   addChangeListener: function (listener) {
57 |     _changeListeners.push(listener);
58 |   },
59 | 
60 |   removeChangeListener: function (listener) {
61 |     _changeListeners = _changeListeners.filter(function (l) {
62 |       return listener !== l;
63 |     });
64 |   }
65 | 
66 | };
67 | 
68 | function getJSON(url, cb) {
69 |   var req = new XMLHttpRequest();
70 |   req.onload = function () {
71 |     if (req.status === 404) {
72 |       cb(new Error('not found'));
73 |     } else {
74 |       cb(null, JSON.parse(req.response));
75 |     }
76 |   };
77 |   req.open('GET', url);
78 |   req.send();
79 | }
80 | 
81 | function postJSON(url, obj, cb) {
82 |   var req = new XMLHttpRequest();
83 |   req.onload = function () {
84 |     cb(JSON.parse(req.response));
85 |   };
86 |   req.open('POST', url);
87 |   req.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
88 |   req.send(JSON.stringify(obj));
89 | }
90 | 
91 | function deleteJSON(url, cb) {
92 |   var req = new XMLHttpRequest();
93 |   req.onload = cb;
94 |   req.open('DELETE', url);
95 |   req.send();
96 | }
97 | 
98 | 
99 | 


--------------------------------------------------------------------------------
/examples/master-detail/app.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   font-family: "Helvetica Neue", Arial;
 3 |   font-weight: 200;
 4 | }
 5 | 
 6 | a {
 7 |   color: hsl(200, 50%, 50%);
 8 | }
 9 | 
10 | a.active {
11 |   color: hsl(20, 50%, 50%);
12 | }
13 | 
14 | #example {
15 |   position: absolute;
16 | }
17 | 
18 | .App {
19 |   position: absolute;
20 |   top: 0;
21 |   left: 0;
22 |   right: 0;
23 |   bottom: 0;
24 |   width: 500px;
25 |   height: 500px;
26 | }
27 | 
28 | .ContactList {
29 |   position: absolute;
30 |   left: 0;
31 |   top: 0;
32 |   bottom: 0;
33 |   width: 300px;
34 |   overflow: auto;
35 |   padding: 20px;
36 | }
37 | 
38 | .Content {
39 |   position: absolute;
40 |   left: 300px;
41 |   top: 0;
42 |   bottom: 0;
43 |   right: 0;
44 |   border-left: 1px solid #ccc;
45 |   overflow: auto;
46 |   padding: 40px;
47 | }
48 | 
49 | 


--------------------------------------------------------------------------------
/examples/master-detail/app.js:
--------------------------------------------------------------------------------
  1 | var React = require('react');
  2 | var Router = require('react-router');
  3 | var ContactStore = require('./ContactStore');
  4 | var {
  5 |   Route,
  6 |   DefaultRoute,
  7 |   NotFoundRoute,
  8 |   RouteHandler,
  9 |   Link
 10 | } = Router;
 11 | 
 12 | var App = React.createClass({
 13 |   getInitialState: function () {
 14 |     return {
 15 |       contacts: ContactStore.getContacts(),
 16 |       loading: true
 17 |     };
 18 |   },
 19 | 
 20 |   componentWillMount: function () {
 21 |     ContactStore.init();
 22 |   },
 23 | 
 24 |   componentDidMount: function () {
 25 |     ContactStore.addChangeListener(this.updateContacts);
 26 |   },
 27 | 
 28 |   componentWillUnmount: function () {
 29 |     ContactStore.removeChangeListener(this.updateContacts);
 30 |   },
 31 | 
 32 |   updateContacts: function () {
 33 |     if (!this.isMounted())
 34 |       return;
 35 | 
 36 |     this.setState({
 37 |       contacts: ContactStore.getContacts(),
 38 |       loading: false
 39 |     });
 40 |   },
 41 | 
 42 |   render: function () {
 43 |     var contacts = this.state.contacts.map(function (contact) {
 44 |       return <li key={contact.id}><Link to="contact" params={contact}>{contact.first}</Link></li>;
 45 |     });
 46 |     return (
 47 |       <div className="App">
 48 |         <div className="ContactList">
 49 |           <Link to="new">New Contact</Link>
 50 |           <ul>
 51 |             {contacts}
 52 |           </ul>
 53 |           <Link to="/nothing-here">Invalid Link (not found)</Link>
 54 |         </div>
 55 |         <div className="Content">
 56 |           <RouteHandler/>
 57 |         </div>
 58 |       </div>
 59 |     );
 60 |   }
 61 | });
 62 | 
 63 | var Index = React.createClass({
 64 |   render: function () {
 65 |     return <h1>Address Book</h1>;
 66 |   }
 67 | });
 68 | 
 69 | var Contact = React.createClass({
 70 | 
 71 |   contextTypes: {
 72 |     router: React.PropTypes.func
 73 |   },
 74 | 
 75 |   getStateFromStore: function () {
 76 |     var id = this.context.router.getCurrentParams().id;
 77 |     return {
 78 |       contact: ContactStore.getContact(id)
 79 |     };
 80 |   },
 81 | 
 82 |   getInitialState: function () {
 83 |     return this.getStateFromStore();
 84 |   },
 85 | 
 86 |   componentDidMount: function () {
 87 |     ContactStore.addChangeListener(this.updateContact);
 88 |   },
 89 | 
 90 |   componentWillUnmount: function () {
 91 |     ContactStore.removeChangeListener(this.updateContact);
 92 |   },
 93 | 
 94 |   componentWillReceiveProps: function () {
 95 |     this.setState(this.getStateFromStore());
 96 |   },
 97 | 
 98 |   updateContact: function () {
 99 |     if (!this.isMounted())
100 |       return;
101 | 
102 |     this.setState(this.getStateFromStore());
103 |   },
104 | 
105 |   destroy: function () {
106 |     var { router } = this.context;
107 |     var id = router.getCurrentParams().id;
108 |     ContactStore.removeContact(id);
109 |     router.transitionTo('/');
110 |   },
111 | 
112 |   render: function () {
113 |     var contact = this.state.contact || {};
114 |     var name = contact.first + ' ' + contact.last;
115 |     var avatar = contact.avatar || 'http://placecage.com/50/50';
116 |     return (
117 |       <div className="Contact">
118 |         <img height="50" src={avatar} key={avatar}/>
119 |         <h3>{name}</h3>
120 |         <button onClick={this.destroy}>Delete</button>
121 |       </div>
122 |     );
123 |   }
124 | });
125 | 
126 | var NewContact = React.createClass({
127 | 
128 |   contextTypes: {
129 |     router: React.PropTypes.func
130 |   },
131 | 
132 |   createContact: function (event) {
133 |     event.preventDefault();
134 |     ContactStore.addContact({
135 |       first: this.refs.first.getDOMNode().value,
136 |       last: this.refs.last.getDOMNode().value
137 |     }, function (contact) {
138 |       this.context.router.transitionTo('contact', { id: contact.id });
139 |     }.bind(this));
140 |   },
141 | 
142 |   render: function () {
143 |     return (
144 |       <form onSubmit={this.createContact}>
145 |         <p>
146 |           <input type="text" ref="first" placeholder="First name"/>
147 |           <input type="text" ref="last" placeholder="Last name"/>
148 |         </p>
149 |         <p>
150 |           <button type="submit">Save</button> <Link to="/">Cancel</Link>
151 |         </p>
152 |       </form>
153 |     );
154 |   }
155 | });
156 | 
157 | var NotFound = React.createClass({
158 |   render: function () {
159 |     return <h2>Not found</h2>;
160 |   }
161 | });
162 | 
163 | var routes = (
164 |   <Route handler={App}>
165 |     <DefaultRoute handler={Index}/>
166 |     <Route name="new" path="contact/new" handler={NewContact}/>
167 |     <Route name="contact" path="contact/:id" handler={Contact}/>
168 |     <NotFoundRoute handler={NotFound}/>
169 |   </Route>
170 | );
171 | 
172 | Router.run(routes, function (Handler) {
173 |   React.render(<Handler/>, document.getElementById('example'));
174 | });
175 | 


--------------------------------------------------------------------------------
/examples/master-detail/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html public "embarassment">
 2 | <title>Master Detail Example</title>
 3 | <link href="../global.css" rel="stylesheet"/>
 4 | <link href="app.css" rel="stylesheet"/>
 5 | <body>
 6 | <h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Master Detail</h1>
 7 | <div id="example"/>
 8 | <script src="/__build__/shared.js"></script>
 9 | <script src="/__build__/master-detail.js"></script>
10 | 
11 | 


--------------------------------------------------------------------------------
/examples/partial-app-loading/app.js:
--------------------------------------------------------------------------------
 1 | var React = require('react');
 2 | var Router = require('react-router');
 3 | var { Route, RouteHandler, Link } = Router;
 4 | 
 5 | var AsyncElement = {
 6 |   loadedComponent: null,
 7 | 
 8 |   load: function () {
 9 |     if (this.constructor.loadedComponent)
10 |       return;
11 | 
12 |     this.bundle(function (component) {
13 |       this.constructor.loadedComponent = component;
14 |       this.forceUpdate();
15 |     }.bind(this));
16 |   },
17 | 
18 |   componentDidMount: function () {
19 |     setTimeout(this.load, 1000); // feel it good
20 |   },
21 | 
22 |   render: function () {
23 |     var Component = this.constructor.loadedComponent;
24 |     if (Component) {
25 |       // can't find RouteHandler in the loaded component, so we just grab
26 |       // it here first.
27 |       this.props.activeRoute = <RouteHandler/>;
28 |       return <Component {...this.props}/>;
29 |     }
30 |     return this.preRender();
31 |   }
32 | };
33 | 
34 | var PreDashboard = React.createClass({
35 |   mixins: [ AsyncElement ],
36 |   bundle: require('bundle?lazy!./dashboard.js'),
37 |   preRender: function () {
38 |     return <div>Loading dashboard...</div>;
39 |   }
40 | });
41 | 
42 | var PreInbox = React.createClass({
43 |   mixins: [ AsyncElement ],
44 |   bundle: require('bundle?lazy!./inbox.js'),
45 |   preRender: function () {
46 |     return <div>Loading inbox...</div>;
47 |   }
48 | });
49 | 
50 | var App = React.createClass({
51 |   render: function () {
52 |     return (
53 |       <div>
54 |         <h1>Partial App</h1>
55 |         <ul>
56 |           <li><Link to="dashboard">Dashboard</Link></li>
57 |         </ul>
58 |         <RouteHandler/>
59 |       </div>
60 |     );
61 |   }
62 | });
63 | 
64 | var routes = (
65 |   <Route handler={App}>
66 |     <Route name="dashboard" path="dashboard" handler={PreDashboard}>
67 |       <Route name="inbox" path="dashboard/inbox" handler={PreInbox}/>
68 |     </Route>
69 |   </Route>
70 | );
71 | 
72 | Router.run(routes, function (Handler) {
73 |   React.render(<Handler/>, document.getElementById('example'));
74 | });
75 | 


--------------------------------------------------------------------------------
/examples/partial-app-loading/dashboard.js:
--------------------------------------------------------------------------------
 1 | var React = require('react');
 2 | var Router = require('react-router');
 3 | var { RouteHandler, Link } = Router;
 4 | 
 5 | var Dashboard = React.createClass({
 6 | 
 7 |   render: function () {
 8 |     return (
 9 |       <div>
10 |         <h1>Dashboard!</h1>
11 |         <ul>
12 |           <li><Link to="inbox">Inbox</Link></li>
13 |         </ul>
14 |         <RouteHandler/>
15 |       </div>
16 |     );
17 |   }
18 | });
19 | 
20 | module.exports = Dashboard;
21 | 


--------------------------------------------------------------------------------
/examples/partial-app-loading/inbox.js:
--------------------------------------------------------------------------------
 1 | var React = require('react');
 2 | 
 3 | var Inbox = React.createClass({
 4 | 
 5 |   render: function () {
 6 |     return (
 7 |       <div>
 8 |         <h1>Inbox!</h1>
 9 |       </div>
10 |     );
11 |   }
12 | });
13 | 
14 | module.exports = Inbox;
15 | 


--------------------------------------------------------------------------------
/examples/partial-app-loading/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html public "intoxication">
 2 | <title>Partial App Loading Example</title>
 3 | <link rel="stylesheet" href="../global.css"/>
 4 | <body>
 5 | <h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Partial App Loading</h1>
 6 | <div id="example"/>
 7 | <script src="/__build__/shared.js"></script>
 8 | <script src="/__build__/partial-app-loading.js"></script>
 9 | 
10 | 


--------------------------------------------------------------------------------
/examples/query-params/app.js:
--------------------------------------------------------------------------------
 1 | var React = require('react');
 2 | var Router = require('react-router');
 3 | var { Route, RouteHandler, Link } = Router;
 4 | 
 5 | var App = React.createClass({
 6 |   render: function () {
 7 |     return (
 8 |       <div>
 9 |         <ul>
10 |           <li><Link to="user" params={{userID: "123"}}>Bob</Link></li>
11 |           <li><Link to="user" params={{userID: "123"}} query={{showAge: true}}>Bob With Query Params</Link></li>
12 |           <li><Link to="user" params={{userID: "abc"}}>Sally</Link></li>
13 |         </ul>
14 |         <RouteHandler/>
15 |       </div>
16 |     );
17 |   }
18 | });
19 | 
20 | var User = React.createClass({
21 | 
22 |   contextTypes: {
23 |     router: React.PropTypes.func
24 |   },
25 | 
26 |   render: function () {
27 |     var { router } = this.context;
28 |     var age = router.getCurrentQuery().showAge ? '33' : '';
29 |     var userID = router.getCurrentParams().userID;
30 |     return (
31 |       <div className="User">
32 |         <h1>User id: {userID}</h1>
33 |         {age}
34 |       </div>
35 |     );
36 |   }
37 | });
38 | 
39 | var routes = (
40 |   <Route handler={App}>
41 |     <Route name="user" path="user/:userID" handler={User}/>
42 |   </Route>
43 | );
44 | 
45 | Router.run(routes, function (Handler) {
46 |   React.render(<Handler/>, document.getElementById('example'));
47 | });
48 | 


--------------------------------------------------------------------------------
/examples/query-params/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html public "restroom">
 2 | <title>Query Params Example</title>
 3 | <link href="../global.css" rel="stylesheet"/>
 4 | <body>
 5 | <h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Query Params</h1>
 6 | <div id="example"/>
 7 | <script src="/__build__/shared.js"></script>
 8 | <script src="/__build__/query-params.js"></script>
 9 | 
10 | 


--------------------------------------------------------------------------------
/examples/rx/app.js:
--------------------------------------------------------------------------------
 1 | var React = require('react');
 2 | var Router = require('react-router');
 3 | var { Route, RouteHandler, Link } = Router;
 4 | var Rx = require('rx');
 5 | 
 6 | var App = React.createClass({
 7 |   render () {
 8 |     return (
 9 |       <div>
10 |         <ul>
11 |           <li><Link to="user" params={{userId: "123"}}>Bob</Link></li>
12 |           <li><Link to="user" params={{userId: "abc"}}>Sally</Link></li>
13 |         </ul>
14 |         <RouteHandler/>
15 |       </div>
16 |     );
17 |   }
18 | });
19 | 
20 | var User = React.createClass({
21 | 
22 |   contextTypes: {
23 |     router: React.PropTypes.func
24 |   },
25 | 
26 |   render () {
27 |     var { userId } = this.context.router.getCurrentParams();
28 |     return (
29 |       <div className="User">
30 |         <h1>User id: {userId}</h1>
31 |       </div>
32 |     );
33 |   }
34 | });
35 | 
36 | var routes = (
37 |   <Route path="/" handler={App}>
38 |     <Route name="user" path="/user/:userId" handler={User}/>
39 |   </Route>
40 | );
41 | 
42 | var source = Rx.Observable.fromEventPattern(function(h) {
43 |   Router.run(routes, h);  
44 | });
45 | 
46 | source.subscribe(function (Handler) {
47 |   React.render(<Handler/>, document.getElementById('example'));
48 | });
49 | 


--------------------------------------------------------------------------------
/examples/rx/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html public "restroom">
 2 | <title>Reactive Extenstions Example</title>
 3 | <link href="../global.css" rel="stylesheet"/>
 4 | <body>
 5 | <h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Reactive Extensions</h1>
 6 | <div id="example"/>
 7 | <script src="/__build__/shared.js"></script>
 8 | <script src="/__build__/rx.js"></script>
 9 | 
10 | 


--------------------------------------------------------------------------------
/examples/shared-root/app.js:
--------------------------------------------------------------------------------
 1 | var React = require('react');
 2 | var Router = require('react-router');
 3 | var { Route, RouteHandler, Link } = Router;
 4 | 
 5 | var App = React.createClass({
 6 |   render: function () {
 7 |     return (
 8 |       <div>
 9 |         <ol>
10 |           <li><Link to="home">Home</Link></li>
11 |           <li><Link to="signin">Sign in</Link></li>
12 |           <li><Link to="forgot-password">Forgot Password</Link></li>
13 |         </ol>
14 |         <RouteHandler/>
15 |       </div>
16 |     );
17 |   }
18 | });
19 | 
20 | var SignedIn = React.createClass({
21 |   render: function () {
22 |     return (
23 |       <div>
24 |         <h2>Signed In</h2>
25 |         <RouteHandler/>
26 |       </div>
27 |     );
28 |   }
29 | });
30 | 
31 | var Home = React.createClass({
32 |   render: function () {
33 |     return (
34 |       <h3>Welcome home!</h3>
35 |     );
36 |   }
37 | });
38 | 
39 | var SignedOut = React.createClass({
40 |   render: function () {
41 |     return (
42 |       <div>
43 |         <h2>Signed Out</h2>
44 |         <RouteHandler/>
45 |       </div>
46 |     );
47 |   }
48 | });
49 | 
50 | var SignIn = React.createClass({
51 |   render: function () {
52 |     return (
53 |       <h3>Please sign in.</h3>
54 |     );
55 |   }
56 | });
57 | 
58 | var ForgotPassword = React.createClass({
59 |   render: function () {
60 |     return (
61 |       <h3>Forgot your password?</h3>
62 |     );
63 |   }
64 | });
65 | 
66 | var routes = (
67 |   <Route handler={App}>
68 |     <Route handler={SignedOut}>
69 |       <Route name="signin" handler={SignIn}/>
70 |       <Route name="forgot-password" handler={ForgotPassword}/>
71 |     </Route>
72 |     <Route handler={SignedIn}>
73 |       <Route name="home" handler={Home}/>
74 |     </Route>
75 |   </Route>
76 | );
77 | 
78 | Router.run(routes, function (Handler) {
79 |   React.render(<Handler/>, document.getElementById('example'));
80 | });
81 | 


--------------------------------------------------------------------------------
/examples/shared-root/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html public "superawesome">
 2 | <title>Shared Root Example</title>
 3 | <link rel="stylesheet" href="../global.css"/>
 4 | <body>
 5 | <h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Shared Root</h1>
 6 | <div id="example"/>
 7 | <script src="/__build__/shared.js"></script>
 8 | <script src="/__build__/shared-root.js"></script>
 9 | 
10 | 


--------------------------------------------------------------------------------
/examples/sidebar/app.css:
--------------------------------------------------------------------------------
 1 | .Sidebar {
 2 |   float: left;
 3 |   background: #eee;
 4 |   padding: 20px;
 5 |   margin: 0 20px 20px 20px;
 6 |   width: 200px;
 7 |   cursor: pointer;
 8 | }
 9 | 
10 | .Content {
11 |   padding: 20px 20px 20px 300px;
12 | }
13 | 
14 | .CategoryNav__Toggle:before {
15 |   display: inline-block;
16 |   width: 1em;
17 |   content: '▸';
18 | }
19 | 
20 | .CategoryNav__Toggle--is-open:before {
21 |   content: '▾';
22 | }
23 | 
24 | 


--------------------------------------------------------------------------------
/examples/sidebar/app.js:
--------------------------------------------------------------------------------
  1 | var React = require('react');
  2 | var Router = require('react-router');
  3 | var { Route, DefaultRoute, RouteHandler, Link } = Router;
  4 | var data = require('./data');
  5 | 
  6 | var CategoryNav = React.createClass({
  7 |   getInitialState: function () {
  8 |     return { isOpen: this.props.defaultIsOpen};
  9 |   },
 10 | 
 11 |   getDefaultProps: function () {
 12 |     return { isOpen: false };
 13 |   },
 14 | 
 15 |   componentWillReceiveProps: function (newProps) {
 16 |     if (!this.state.isOpen)
 17 |       this.setState({ isOpen: newProps.defaultIsOpen });
 18 |   },
 19 | 
 20 |   toggle: function () {
 21 |     this.setState({ isOpen: !this.state.isOpen });
 22 |   },
 23 | 
 24 |   buildToggleClassName: function () {
 25 |     var toggleClassName = 'CategoryNav__Toggle';
 26 |     if (this.state.isOpen)
 27 |       toggleClassName += ' CategoryNav__Toggle--is-open';
 28 |     return toggleClassName;
 29 |   },
 30 | 
 31 |   renderItems: function () {
 32 |     var category = this.props.category;
 33 |     return this.state.isOpen ? category.items.map(function (item) {
 34 |       var params = { name: item.name, category: category.name };
 35 |       return (
 36 |         <li key={item.name}>
 37 |           <Link to="item" params={params}>{item.name}</Link>
 38 |         </li>
 39 |       );
 40 |     }) : null;
 41 |   },
 42 | 
 43 |   render: function () {
 44 |     var category = this.props.category;
 45 |     return (
 46 |       <div className="CategoryNav">
 47 |         <h3
 48 |           className={this.buildToggleClassName()}
 49 |           onClick={this.toggle}
 50 |         >{category.name}</h3>
 51 |         <ul>{this.renderItems()}</ul>  
 52 |       </div>
 53 |     );
 54 |   }
 55 | });
 56 | 
 57 | var Sidebar = React.createClass({
 58 |   renderCategory: function (category) {
 59 |     return <CategoryNav
 60 |       key={category.name}
 61 |       defaultIsOpen={category.name === this.props.activeCategory}
 62 |       category={category}
 63 |     />;
 64 |   },
 65 | 
 66 |   render: function () {
 67 |     return (
 68 |       <div className="Sidebar">
 69 |         {this.props.categories.map(this.renderCategory)}
 70 |       </div>
 71 |     );
 72 |   }
 73 | });
 74 | 
 75 | var App = React.createClass({
 76 | 
 77 |   contextTypes: {
 78 |     router: React.PropTypes.func.isRequired
 79 |   },
 80 | 
 81 |   render: function () {
 82 |     var activeCategory = this.context.router.getCurrentParams().category;
 83 |     return (
 84 |       <div>
 85 |         <Sidebar activeCategory={activeCategory} categories={data.getAll()}/>
 86 |         <div className="Content">
 87 |           <RouteHandler/>
 88 |         </div>
 89 |       </div>
 90 |     );
 91 |   }
 92 | });
 93 | 
 94 | var Item = React.createClass({
 95 | 
 96 |   contextTypes: {
 97 |     router: React.PropTypes.func.isRequired
 98 |   },
 99 | 
100 |   render: function () {
101 |     var params = this.context.router.getCurrentParams();
102 |     var category = data.lookupCategory(params.category);
103 |     var item = data.lookupItem(params.category, params.name);
104 |     return (
105 |       <div>
106 |         <h2>{category.name} / {item.name}</h2>
107 |         <p>Price: ${item.price}</p>
108 |       </div>
109 |     );
110 |   }
111 | });
112 | 
113 | var Index = React.createClass({
114 |   render: function () {
115 |     return (
116 |       <div>
117 |         <p>Sidebar features:</p>
118 |         <ul style={{maxWidth: '400px'}}>
119 |           <li>User can open/close categories</li>
120 |           <li>
121 |             Visiting an item on first page load will automatically open
122 |             the correct category. (Click an item, then reload the
123 |             browser.)
124 |           </li>
125 |           <li>
126 |             Navigating with forward/back buttons will open an active
127 |             category if it is not already open. (Navigate to several
128 |             items, close all the categories, then use back/forward
129 |             buttons.)
130 |           </li>
131 |           <li>
132 |             Only the user can close a category. (Navigating from an
133 |             active category will not close it.)
134 |           </li>
135 |         </ul>
136 |       </div>
137 |     );
138 |   }
139 | });
140 | 
141 | var routes = (
142 |   <Route handler={App}>
143 |     <DefaultRoute handler={Index}/>
144 |     <Route name="item" path=":category/:name" handler={Item} />
145 |   </Route>
146 | );
147 | 
148 | Router.run(routes, function (Handler) {
149 |   React.render(<Handler/>, document.getElementById('example'));
150 | });
151 | 


--------------------------------------------------------------------------------
/examples/sidebar/data.js:
--------------------------------------------------------------------------------
 1 | var data = [
 2 |   {
 3 |     name: 'Tacos',
 4 |     items: [
 5 |       { name: 'Carne Asada', price: 7 },
 6 |       { name: 'Pollo', price: 6 },
 7 |       { name: 'Carnitas', price: 6 }
 8 |     ]
 9 |   },
10 |   {
11 |     name: 'Burgers',
12 |     items: [
13 |       { name: 'Buffalo Bleu', price: 8 },
14 |       { name: 'Bacon', price: 8 },
15 |       { name: 'Mushroom and Swiss', price: 6 }
16 |     ]
17 |   },
18 |   {
19 |     name: 'Drinks',
20 |     items: [
21 |       { name: 'Lemonade', price: 3 },
22 |       { name: 'Root Beer', price: 4 },
23 |       { name: 'Iron Port', price: 5 }
24 |     ]
25 |   }
26 | ];
27 | 
28 | var dataMap = data.reduce(function (map, category) {
29 |   category.itemsMap = category.items.reduce(function (itemsMap, item) {
30 |     itemsMap[item.name] = item;
31 |     return itemsMap;
32 |   }, {});
33 |   map[category.name] = category;
34 |   return map;
35 | }, {});
36 | 
37 | exports.getAll = function () {
38 |   return data;
39 | };
40 | 
41 | exports.lookupCategory = function (name) {
42 |   return dataMap[name];
43 | };
44 | 
45 | exports.lookupItem = function (category, item) {
46 |   return dataMap[category].itemsMap[item];
47 | };
48 | 
49 | 


--------------------------------------------------------------------------------
/examples/sidebar/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html public "restroom">
 2 | <title>Sidebar Example</title>
 3 | <link href="../global.css" rel="stylesheet"/>
 4 | <link href="app.css" rel="stylesheet"/>
 5 | <body>
 6 | <h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Sidebar</h1>
 7 | <div id="example"/>
 8 | <script src="/__build__/shared.js"></script>
 9 | <script src="/__build__/sidebar.js"></script>
10 | 
11 | 


--------------------------------------------------------------------------------
/examples/simple-master-detail/app.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   font-family: "Helvetica Neue", Arial;
 3 |   font-weight: 200;
 4 | }
 5 | 
 6 | a {
 7 |   color: hsl(200, 50%, 50%);
 8 | }
 9 | 
10 | a.active {
11 |   color: hsl(20, 50%, 50%);
12 | }
13 | 
14 | #example {
15 |   position: absolute;
16 | }
17 | 
18 | .App {
19 |   position: absolute;
20 |   top: 0;
21 |   left: 0;
22 |   right: 0;
23 |   bottom: 0;
24 |   width: 1000px;
25 |   height: 800px;
26 | }
27 | 
28 | .Master {
29 |   position: absolute;
30 |   left: 0;
31 |   top: 0;
32 |   bottom: 0;
33 |   width: 200px;
34 |   overflow: auto;
35 |   padding: 10px 40px;
36 | }
37 | 
38 | .Detail {
39 |   position: absolute;
40 |   left: 300px;
41 |   top: 0;
42 |   bottom: 0;
43 |   right: 0;
44 |   border-left: 1px solid #ccc;
45 |   overflow: auto;
46 |   padding: 40px;
47 | }
48 | 
49 | 


--------------------------------------------------------------------------------
/examples/simple-master-detail/app.js:
--------------------------------------------------------------------------------
  1 | var React = require('react');
  2 | var Router = require('react-router');
  3 | var { Route, DefaultRoute, RouteHandler, Link } = Router;
  4 | 
  5 | var App = React.createClass({
  6 |   getInitialState: function () {
  7 |     return { states: findStates() };
  8 |   },
  9 | 
 10 |   render: function () {
 11 |     var links = this.state.states.map(function (state) {
 12 |       return (
 13 |         <li key={state.abbr}>
 14 |           <Link
 15 |             to="state"
 16 |             params={{ abbr: state.abbr }}
 17 |           >{state.name}</Link>
 18 |         </li>
 19 |       );
 20 |     });
 21 |     return (
 22 |       <div className="App">
 23 |         <ul className="Master">
 24 |           {links}
 25 |         </ul>
 26 |         <div className="Detail">
 27 |           <RouteHandler/>
 28 |         </div>
 29 |       </div>
 30 |     );
 31 |   }
 32 | });
 33 | 
 34 | var Index = React.createClass({
 35 |   render: function () {
 36 |     return <p>Select a state from the left</p>;
 37 |   }
 38 | });
 39 | 
 40 | var State = React.createClass({
 41 | 
 42 |   contextTypes: {
 43 |     router: React.PropTypes.func
 44 |   },
 45 | 
 46 |   imageUrl: function (name) {
 47 |     return "http://www.50states.com/maps/" + underscore(name) + ".gif";
 48 |   },
 49 | 
 50 |   render: function () {
 51 |     var unitedState = findState(this.context.router.getCurrentParams().abbr);
 52 |     return (
 53 |       <div className="State">
 54 |         <h1>{unitedState.name}</h1>
 55 |         <img src={this.imageUrl(unitedState.name)}/>
 56 |       </div>
 57 |     );
 58 |   }
 59 | });
 60 | 
 61 | var routes = (
 62 |   <Route handler={App}>
 63 |     <DefaultRoute handler={Index}/>
 64 |     <Route name="state" path="state/:abbr" handler={State}/>
 65 |   </Route>
 66 | );
 67 | 
 68 | Router.run(routes, function (Handler) {
 69 |   React.render(<Handler/>, document.getElementById('example'));
 70 | });
 71 | 
 72 | /*****************************************************************************/
 73 | // data stuff
 74 | 
 75 | function findState(abbr) {
 76 |   var states = findStates();
 77 |   for (var i = 0, l = states.length; i < l; i ++) {
 78 |     if (states[i].abbr === abbr) {
 79 |       return states[i];
 80 |     }
 81 |   }
 82 | }
 83 | 
 84 | function findStates() {
 85 |   return [
 86 |     { abbr: "AL", name: "Alabama"},
 87 |     { abbr: "AK", name: "Alaska"},
 88 |     { abbr: "AZ", name: "Arizona"},
 89 |     { abbr: "AR", name: "Arkansas"},
 90 |     { abbr: "CA", name: "California"},
 91 |     { abbr: "CO", name: "Colorado"},
 92 |     { abbr: "CT", name: "Connecticut"},
 93 |     { abbr: "DE", name: "Delaware"},
 94 |     { abbr: "FL", name: "Florida"},
 95 |     { abbr: "GA", name: "Georgia"},
 96 |     { abbr: "HI", name: "Hawaii"},
 97 |     { abbr: "ID", name: "Idaho"},
 98 |     { abbr: "IL", name: "Illinois"},
 99 |     { abbr: "IN", name: "Indiana"},
100 |     { abbr: "IA", name: "Iowa"},
101 |     { abbr: "KS", name: "Kansas"},
102 |     { abbr: "KY", name: "Kentucky"},
103 |     { abbr: "LA", name: "Louisiana"},
104 |     { abbr: "ME", name: "Maine"},
105 |     { abbr: "MD", name: "Maryland"},
106 |     { abbr: "MA", name: "Massachusetts"},
107 |     { abbr: "MI", name: "Michigan"},
108 |     { abbr: "MN", name: "Minnesota"},
109 |     { abbr: "MS", name: "Mississippi"},
110 |     { abbr: "MO", name: "Missouri"},
111 |     { abbr: "MT", name: "Montana"},
112 |     { abbr: "NE", name: "Nebraska"},
113 |     { abbr: "NV", name: "Nevada"},
114 |     { abbr: "NH", name: "New Hampshire"},
115 |     { abbr: "NJ", name: "New Jersey"},
116 |     { abbr: "NM", name: "New Mexico"},
117 |     { abbr: "NY", name: "New York"},
118 |     { abbr: "NC", name: "North Carolina"},
119 |     { abbr: "ND", name: "North Dakota"},
120 |     { abbr: "OH", name: "Ohio"},
121 |     { abbr: "OK", name: "Oklahoma"},
122 |     { abbr: "OR", name: "Oregon"},
123 |     { abbr: "PA", name: "Pennsylvania"},
124 |     { abbr: "RI", name: "Rhode Island"},
125 |     { abbr: "SC", name: "South Carolina"},
126 |     { abbr: "SD", name: "South Dakota"},
127 |     { abbr: "TN", name: "Tennessee"},
128 |     { abbr: "TX", name: "Texas"},
129 |     { abbr: "UT", name: "Utah"},
130 |     { abbr: "VT", name: "Vermont"},
131 |     { abbr: "VA", name: "Virginia"},
132 |     { abbr: "WA", name: "Washington"},
133 |     { abbr: "WV", name: "West Virginia"},
134 |     { abbr: "WI", name: "Wisconsin"},
135 |     { abbr: "WY", name: "Wyoming"}
136 |   ];
137 | }
138 | 
139 | function underscore(str) {
140 |   return str.toLowerCase().replace(/ /, '_');
141 | }
142 | 


--------------------------------------------------------------------------------
/examples/simple-master-detail/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html public "embarassment">
 2 | <title>Simple Master Detail Example</title>
 3 | <link href="../global.css" rel="stylesheet"/>
 4 | <link href="app.css" rel="stylesheet"/>
 5 | <body>
 6 | <h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Simple Master Detail</h1>
 7 | <div id="example"/>
 8 | <script src="/__build__/shared.js"></script>
 9 | <script src="/__build__/simple-master-detail.js"></script>
10 | 
11 | 


--------------------------------------------------------------------------------
/examples/transitions/app.js:
--------------------------------------------------------------------------------
 1 | var React = require('react');
 2 | var Router = require('react-router');
 3 | var { Route, DefaultRoute, RouteHandler, Link } = Router;
 4 | 
 5 | var App = React.createClass({
 6 |   render: function () {
 7 |     return (
 8 |       <div>
 9 |         <ul>
10 |           <li><Link to="dashboard">Dashboard</Link></li>
11 |           <li><Link to="form">Form</Link></li>
12 |         </ul>
13 |         <RouteHandler/>
14 |       </div>
15 |     );
16 |   }
17 | });
18 | 
19 | var Home = React.createClass({
20 |   render: function () {
21 |     return <h1>Home</h1>;
22 |   }
23 | });
24 | 
25 | var Dashboard = React.createClass({
26 |   render: function () {
27 |     return <h1>Dashboard</h1>;
28 |   }
29 | });
30 | 
31 | var Form = React.createClass({
32 | 
33 |   contextTypes: {
34 |     router: React.PropTypes.func
35 |   },
36 | 
37 |   statics: {
38 |     willTransitionFrom: function (transition, element) {
39 |       if (element.refs.userInput.getDOMNode().value !== '') {
40 |         if (!confirm('You have unsaved information, are you sure you want to leave this page?')) {
41 |           transition.abort();
42 |         }
43 |       }
44 |     }
45 |   },
46 | 
47 |   handleSubmit: function (event) {
48 |     event.preventDefault();
49 |     this.refs.userInput.getDOMNode().value = '';
50 |     this.context.router.transitionTo('/');
51 |   },
52 | 
53 |   render: function () {
54 |     return (
55 |       <div>
56 |         <form onSubmit={this.handleSubmit}>
57 |           <p>Click the dashboard link with text in the input.</p>
58 |           <input type="text" ref="userInput" defaultValue="ohai" />
59 |           <button type="submit">Go</button>
60 |         </form>
61 |       </div>
62 |     );
63 |   }
64 | });
65 | 
66 | var routes = (
67 |   <Route handler={App}>
68 |     <DefaultRoute handler={Home}/>
69 |     <Route name="dashboard" handler={Dashboard}/>
70 |     <Route name="form" handler={Form}/>
71 |   </Route>
72 | );
73 | 
74 | Router.run(routes, function (Handler) {
75 |   React.render(<Handler/>, document.getElementById('example'));
76 | });
77 | 


--------------------------------------------------------------------------------
/examples/transitions/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html public "restroom">
 2 | <title>Transitions Example</title>
 3 | <link href="../global.css" rel="stylesheet"/>
 4 | <body>
 5 | <h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Transitions</h1>
 6 | <div id="example"/>
 7 | <script src="/__build__/shared.js"></script>
 8 | <script src="/__build__/transitions.js"></script>
 9 | 
10 | 


--------------------------------------------------------------------------------
/examples/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var fs = require('fs');
 2 | var path = require('path');
 3 | var webpack = require('webpack');
 4 | 
 5 | function isDirectory(dir) {
 6 |   return fs.lstatSync(dir).isDirectory();
 7 | }
 8 | 
 9 | module.exports = {
10 | 
11 |   devtool: 'inline-source-map',
12 | 
13 |   entry: fs.readdirSync(__dirname).reduce(function (entries, dir) {
14 |     var isDraft = dir.charAt(0) === '_';
15 | 
16 |     if (!isDraft && isDirectory(path.join(__dirname, dir)))
17 |       entries[dir] = path.join(__dirname, dir, 'app.js');
18 | 
19 |     return entries;
20 |   }, {}),
21 | 
22 |   output: {
23 |     path: 'examples/__build__',
24 |     filename: '[name].js',
25 |     chunkFilename: '[id].chunk.js',
26 |     publicPath: '/__build__/'
27 |   },
28 | 
29 |   module: {
30 |     loaders: [
31 |       { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }
32 |     ]
33 |   },
34 | 
35 |   resolve: {
36 |     alias: {
37 |       'react-router': '../../modules/index'
38 |     }
39 |   },
40 | 
41 |   plugins: [
42 |     new webpack.optimize.CommonsChunkPlugin('shared.js'),
43 |     new webpack.DefinePlugin({
44 |       'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
45 |     })
46 |   ]
47 | 
48 | };
49 | 


--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
 1 | var webpack = require('webpack');
 2 | 
 3 | module.exports = function (config) {
 4 |   config.set({
 5 | 
 6 |     browsers: [ process.env.CONTINUOUS_INTEGRATION ? 'Firefox' : 'Chrome' ],
 7 | 
 8 |     singleRun: process.env.CONTINUOUS_INTEGRATION === 'true',
 9 | 
10 |     frameworks: [ 'mocha' ],
11 | 
12 |     files: [
13 |       'tests.webpack.js'
14 |     ],
15 | 
16 |     preprocessors: {
17 |       'tests.webpack.js': [ 'webpack', 'sourcemap' ]
18 |     },
19 | 
20 |     reporters: [ 'dots' ],
21 | 
22 |     webpack: {
23 |       devtool: 'inline-source-map',
24 |       module: {
25 |         loaders: [
26 |           { test: /\.js$/, loader: 'babel-loader' }
27 |         ]
28 |       },
29 |       plugins: [
30 |         new webpack.DefinePlugin({
31 |           'process.env.NODE_ENV': JSON.stringify('test')
32 |         })
33 |       ]
34 |     },
35 | 
36 |     webpackServer: {
37 |       noInfo: true
38 |     }
39 | 
40 |   });
41 | };
42 | 


--------------------------------------------------------------------------------
/modules/Cancellation.js:
--------------------------------------------------------------------------------
1 | /**
2 |  * Represents a cancellation caused by navigating away
3 |  * before the previous transition has fully resolved.
4 |  */
5 | function Cancellation() {}
6 | 
7 | module.exports = Cancellation;
8 | 


--------------------------------------------------------------------------------
/modules/History.js:
--------------------------------------------------------------------------------
 1 | var invariant = require('react/lib/invariant');
 2 | var canUseDOM = require('react/lib/ExecutionEnvironment').canUseDOM;
 3 | 
 4 | var History = {
 5 | 
 6 |   /**
 7 |    * The current number of entries in the history.
 8 |    *
 9 |    * Note: This property is read-only.
10 |    */
11 |   length: 1,
12 | 
13 |   /**
14 |    * Sends the browser back one entry in the history.
15 |    */
16 |   back: function () {
17 |     invariant(
18 |       canUseDOM,
19 |       'Cannot use History.back without a DOM'
20 |     );
21 | 
22 |     // Do this first so that History.length will
23 |     // be accurate in location change listeners.
24 |     History.length -= 1;
25 | 
26 |     window.history.back();
27 |   }
28 | 
29 | };
30 | 
31 | module.exports = History;
32 | 


--------------------------------------------------------------------------------
/modules/Match.js:
--------------------------------------------------------------------------------
 1 | /* jshint -W084 */
 2 | var PathUtils = require('./PathUtils');
 3 | 
 4 | function deepSearch(route, pathname, query) {
 5 |   // Check the subtree first to find the most deeply-nested match.
 6 |   var childRoutes = route.childRoutes;
 7 |   if (childRoutes) {
 8 |     var match, childRoute;
 9 |     for (var i = 0, len = childRoutes.length; i < len; ++i) {
10 |       childRoute = childRoutes[i];
11 | 
12 |       if (childRoute.isDefault || childRoute.isNotFound)
13 |         continue; // Check these in order later.
14 | 
15 |       if (match = deepSearch(childRoute, pathname, query)) {
16 |         // A route in the subtree matched! Add this route and we're done.
17 |         match.routes.unshift(route);
18 |         return match;
19 |       }
20 |     }
21 |   }
22 | 
23 |   // No child routes matched; try the default route.
24 |   var defaultRoute = route.defaultRoute;
25 |   if (defaultRoute && (params = PathUtils.extractParams(defaultRoute.path, pathname)))
26 |     return new Match(pathname, params, query, [ route, defaultRoute ]);
27 | 
28 |   // Does the "not found" route match?
29 |   var notFoundRoute = route.notFoundRoute;
30 |   if (notFoundRoute && (params = PathUtils.extractParams(notFoundRoute.path, pathname)))
31 |     return new Match(pathname, params, query, [ route, notFoundRoute ]);
32 | 
33 |   // Last attempt: check this route.
34 |   var params = PathUtils.extractParams(route.path, pathname);
35 |   if (params)
36 |     return new Match(pathname, params, query, [ route ]);
37 | 
38 |   return null;
39 | }
40 | 
41 | class Match {
42 | 
43 |   /**
44 |    * Attempts to match depth-first a route in the given route's
45 |    * subtree against the given path and returns the match if it
46 |    * succeeds, null if no match can be made.
47 |    */
48 |   static findMatch(routes, path) {
49 |     var pathname = PathUtils.withoutQuery(path);
50 |     var query = PathUtils.extractQuery(path);
51 |     var match = null;
52 | 
53 |     for (var i = 0, len = routes.length; match == null && i < len; ++i)
54 |       match = deepSearch(routes[i], pathname, query);
55 | 
56 |     return match;
57 |   }
58 | 
59 |   constructor(pathname, params, query, routes) {
60 |     this.pathname = pathname;
61 |     this.params = params;
62 |     this.query = query;
63 |     this.routes = routes;
64 |   }
65 | 
66 | }
67 | 
68 | module.exports = Match;
69 | 


--------------------------------------------------------------------------------
/modules/Navigation.js:
--------------------------------------------------------------------------------
 1 | var warning = require('react/lib/warning');
 2 | var PropTypes = require('./PropTypes');
 3 | 
 4 | function deprecatedMethod(routerMethodName, fn) {
 5 |   return function () {
 6 |     warning(
 7 |       false,
 8 |       `Router.Navigation is deprecated. Please use this.context.router.${routerMethodName}() instead`
 9 |     );
10 | 
11 |     return fn.apply(this, arguments);
12 |   };
13 | }
14 | 
15 | /**
16 |  * A mixin for components that modify the URL.
17 |  *
18 |  * Example:
19 |  *
20 |  *   var MyLink = React.createClass({
21 |  *     mixins: [ Router.Navigation ],
22 |  *     handleClick(event) {
23 |  *       event.preventDefault();
24 |  *       this.transitionTo('aRoute', { the: 'params' }, { the: 'query' });
25 |  *     },
26 |  *     render() {
27 |  *       return (
28 |  *         <a onClick={this.handleClick}>Click me!</a>
29 |  *       );
30 |  *     }
31 |  *   });
32 |  */
33 | var Navigation = {
34 | 
35 |   contextTypes: {
36 |     router: PropTypes.router.isRequired
37 |   },
38 | 
39 |   /**
40 |    * Returns an absolute URL path created from the given route
41 |    * name, URL parameters, and query values.
42 |    */
43 |   makePath: deprecatedMethod('makePath', function (to, params, query) {
44 |     return this.context.router.makePath(to, params, query);
45 |   }),
46 | 
47 |   /**
48 |    * Returns a string that may safely be used as the href of a
49 |    * link to the route with the given name.
50 |    */
51 |   makeHref: deprecatedMethod('makeHref', function (to, params, query) {
52 |     return this.context.router.makeHref(to, params, query);
53 |   }),
54 | 
55 |   /**
56 |    * Transitions to the URL specified in the arguments by pushing
57 |    * a new URL onto the history stack.
58 |    */
59 |   transitionTo: deprecatedMethod('transitionTo', function (to, params, query) {
60 |     this.context.router.transitionTo(to, params, query);
61 |   }),
62 | 
63 |   /**
64 |    * Transitions to the URL specified in the arguments by replacing
65 |    * the current URL in the history stack.
66 |    */
67 |   replaceWith: deprecatedMethod('replaceWith', function (to, params, query) {
68 |     this.context.router.replaceWith(to, params, query);
69 |   }),
70 | 
71 |   /**
72 |    * Transitions to the previous URL.
73 |    */
74 |   goBack: deprecatedMethod('goBack', function () {
75 |     return this.context.router.goBack();
76 |   })
77 | 
78 | };
79 | 
80 | module.exports = Navigation;
81 | 


--------------------------------------------------------------------------------
/modules/PropTypes.js:
--------------------------------------------------------------------------------
 1 | var assign = require('react/lib/Object.assign');
 2 | var ReactPropTypes = require('react').PropTypes;
 3 | var Route = require('./Route');
 4 | 
 5 | var PropTypes = assign({}, ReactPropTypes, {
 6 | 
 7 |   /**
 8 |    * Indicates that a prop should be falsy.
 9 |    */
10 |   falsy(props, propName, componentName) {
11 |     if (props[propName])
12 |       return new Error(`<${componentName}> may not have a "${propName}" prop`);
13 |   },
14 | 
15 |   /**
16 |    * Indicates that a prop should be a Route object.
17 |    */
18 |   route: ReactPropTypes.instanceOf(Route),
19 | 
20 |   /**
21 |    * Indicates that a prop should be a Router object.
22 |    */
23 |   //router: ReactPropTypes.instanceOf(Router) // TODO
24 |   router: ReactPropTypes.func
25 | 
26 | });
27 | 
28 | module.exports = PropTypes;
29 | 


--------------------------------------------------------------------------------
/modules/Redirect.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Encapsulates a redirect to the given route.
 3 |  */
 4 | function Redirect(to, params, query) {
 5 |   this.to = to;
 6 |   this.params = params;
 7 |   this.query = query;
 8 | }
 9 | 
10 | module.exports = Redirect;
11 | 


--------------------------------------------------------------------------------
/modules/ScrollHistory.js:
--------------------------------------------------------------------------------
 1 | var invariant = require('react/lib/invariant');
 2 | var canUseDOM = require('react/lib/ExecutionEnvironment').canUseDOM;
 3 | var getWindowScrollPosition = require('./getWindowScrollPosition');
 4 | 
 5 | function shouldUpdateScroll(state, prevState) {
 6 |   if (!prevState)
 7 |     return true;
 8 | 
 9 |   // Don't update scroll position when only the query has changed.
10 |   if (state.pathname === prevState.pathname)
11 |     return false;
12 | 
13 |   var routes = state.routes;
14 |   var prevRoutes = prevState.routes;
15 | 
16 |   var sharedAncestorRoutes = routes.filter(function (route) {
17 |     return prevRoutes.indexOf(route) !== -1;
18 |   });
19 | 
20 |   return !sharedAncestorRoutes.some(function (route) {
21 |     return route.ignoreScrollBehavior;
22 |   });
23 | }
24 | 
25 | /**
26 |  * Provides the router with the ability to manage window scroll position
27 |  * according to its scroll behavior.
28 |  */
29 | var ScrollHistory = {
30 | 
31 |   statics: {
32 | 
33 |     /**
34 |      * Records curent scroll position as the last known position for the given URL path.
35 |      */
36 |     recordScrollPosition: function (path) {
37 |       if (!this.scrollHistory)
38 |         this.scrollHistory = {};
39 | 
40 |       this.scrollHistory[path] = getWindowScrollPosition();
41 |     },
42 | 
43 |     /**
44 |      * Returns the last known scroll position for the given URL path.
45 |      */
46 |     getScrollPosition: function (path) {
47 |       if (!this.scrollHistory)
48 |         this.scrollHistory = {};
49 | 
50 |       return this.scrollHistory[path] || null;
51 |     }
52 | 
53 |   },
54 | 
55 |   componentWillMount: function () {
56 |     invariant(
57 |       this.constructor.getScrollBehavior() == null || canUseDOM,
58 |       'Cannot use scroll behavior without a DOM'
59 |     );
60 |   },
61 | 
62 |   componentDidMount: function () {
63 |     this._updateScroll();
64 |   },
65 | 
66 |   componentDidUpdate: function (prevProps, prevState) {
67 |     this._updateScroll(prevState);
68 |   },
69 | 
70 |   _updateScroll: function (prevState) {
71 |     if (!shouldUpdateScroll(this.state, prevState))
72 |       return;
73 | 
74 |     var scrollBehavior = this.constructor.getScrollBehavior();
75 | 
76 |     if (scrollBehavior)
77 |       scrollBehavior.updateScrollPosition(
78 |         this.constructor.getScrollPosition(this.state.path),
79 |         this.state.action
80 |       );
81 |   }
82 | 
83 | };
84 | 
85 | module.exports = ScrollHistory;
86 | 


--------------------------------------------------------------------------------
/modules/State.js:
--------------------------------------------------------------------------------
 1 | var warning = require('react/lib/warning');
 2 | var PropTypes = require('./PropTypes');
 3 | 
 4 | function deprecatedMethod(routerMethodName, fn) {
 5 |   return function () {
 6 |     warning(
 7 |       false,
 8 |       `Router.State is deprecated. Please use this.context.router.${routerMethodName}() instead`
 9 |     );
10 | 
11 |     return fn.apply(this, arguments);
12 |   };
13 | }
14 | 
15 | /**
16 |  * A mixin for components that need to know the path, routes, URL
17 |  * params and query that are currently active.
18 |  *
19 |  * Example:
20 |  *
21 |  *   var AboutLink = React.createClass({
22 |  *     mixins: [ Router.State ],
23 |  *     render() {
24 |  *       var className = this.props.className;
25 |  *   
26 |  *       if (this.isActive('about'))
27 |  *         className += ' is-active';
28 |  *   
29 |  *       return React.DOM.a({ className: className }, this.props.children);
30 |  *     }
31 |  *   });
32 |  */
33 | var State = {
34 | 
35 |   contextTypes: {
36 |     router: PropTypes.router.isRequired
37 |   },
38 | 
39 |   /**
40 |    * Returns the current URL path.
41 |    */
42 |   getPath: deprecatedMethod('getCurrentPath', function () {
43 |     return this.context.router.getCurrentPath();
44 |   }),
45 | 
46 |   /**
47 |    * Returns the current URL path without the query string.
48 |    */
49 |   getPathname: deprecatedMethod('getCurrentPathname', function () {
50 |     return this.context.router.getCurrentPathname();
51 |   }),
52 | 
53 |   /**
54 |    * Returns an object of the URL params that are currently active.
55 |    */
56 |   getParams: deprecatedMethod('getCurrentParams', function () {
57 |     return this.context.router.getCurrentParams();
58 |   }),
59 | 
60 |   /**
61 |    * Returns an object of the query params that are currently active.
62 |    */
63 |   getQuery: deprecatedMethod('getCurrentQuery', function () {
64 |     return this.context.router.getCurrentQuery();
65 |   }),
66 | 
67 |   /**
68 |    * Returns an array of the routes that are currently active.
69 |    */
70 |   getRoutes: deprecatedMethod('getCurrentRoutes', function () {
71 |     return this.context.router.getCurrentRoutes();
72 |   }),
73 | 
74 |   /**
75 |    * A helper method to determine if a given route, params, and query
76 |    * are active.
77 |    */
78 |   isActive: deprecatedMethod('isActive', function (to, params, query) {
79 |     return this.context.router.isActive(to, params, query);
80 |   })
81 | 
82 | };
83 | 
84 | module.exports = State;
85 | 


--------------------------------------------------------------------------------
/modules/TestUtils.js:
--------------------------------------------------------------------------------
  1 | var React = require('react');
  2 | var RouteHandler = require('./components/RouteHandler');
  3 | var PropTypes = require('./PropTypes');
  4 | 
  5 | exports.Nested = React.createClass({
  6 |   render: function () {
  7 |     return (
  8 |       <div>
  9 |         <h1 className="Nested">Nested</h1>
 10 |         <RouteHandler />
 11 |       </div>
 12 |     );
 13 |   }
 14 | });
 15 | 
 16 | exports.Foo = React.createClass({
 17 |   render: function () {
 18 |     return <div className="Foo">Foo</div>;
 19 |   }
 20 | });
 21 | 
 22 | exports.Bar = React.createClass({
 23 |   render: function () {
 24 |     return <div className="Bar">Bar</div>;
 25 |   }
 26 | });
 27 | 
 28 | exports.Baz = React.createClass({
 29 |   render: function () {
 30 |     return <div className="Baz">Baz</div>;
 31 |   }
 32 | });
 33 | 
 34 | exports.Async = React.createClass({
 35 |   statics: {
 36 |     delay: 10,
 37 | 
 38 |     willTransitionTo: function (transition, params, query, callback) {
 39 |       setTimeout(callback, exports.Async.delay);
 40 |     }
 41 |   },
 42 | 
 43 |   render: function () {
 44 |     return <div className="Async">Async</div>;
 45 |   }
 46 | });
 47 | 
 48 | exports.RedirectToFoo = React.createClass({
 49 |   statics: {
 50 |     willTransitionTo: function (transition) {
 51 |       transition.redirect('/foo');
 52 |     }
 53 |   },
 54 | 
 55 |   render: function () {
 56 |     return null;
 57 |   }
 58 | });
 59 | 
 60 | exports.RedirectToFooAsync = React.createClass({
 61 |   statics: {
 62 |     delay: 10,
 63 | 
 64 |     willTransitionTo: function (transition, params, query, callback) {
 65 |       setTimeout(function () {
 66 |         transition.redirect('/foo');
 67 |         callback();
 68 |       }, exports.RedirectToFooAsync.delay);
 69 |     }
 70 |   },
 71 | 
 72 |   render: function () {
 73 |     return null;
 74 |   }
 75 | });
 76 | 
 77 | 
 78 | exports.Abort = React.createClass({
 79 |   statics: {
 80 |     willTransitionTo: function (transition) {
 81 |       transition.abort();
 82 |     }
 83 |   },
 84 | 
 85 |   render: function () {
 86 |     return null;
 87 |   }
 88 | });
 89 | 
 90 | exports.AbortAsync = React.createClass({
 91 |   statics: {
 92 |     delay: 10,
 93 | 
 94 |     willTransitionTo: function (transition, params, query, callback) {
 95 |       setTimeout(function () {
 96 |         transition.abort();
 97 |         callback();
 98 |       }, exports.AbortAsync.delay);
 99 |     }
100 |   },
101 | 
102 |   render: function () {
103 |     return null;
104 |   }
105 | });
106 | 
107 | exports.EchoFooProp = React.createClass({
108 |   render: function () {
109 |     return <div>{this.props.foo}</div>;
110 |   }
111 | });
112 | 
113 | exports.EchoBarParam = React.createClass({
114 |   contextTypes: {
115 |     router: PropTypes.router.isRequired
116 |   },
117 |   render: function () {
118 |     return <div className="EchoBarParam">{this.context.router.getCurrentParams().bar}</div>;
119 |   }
120 | });
121 | 


--------------------------------------------------------------------------------
/modules/Transition.js:
--------------------------------------------------------------------------------
 1 | /* jshint -W058 */
 2 | 
 3 | var Cancellation = require('./Cancellation');
 4 | var Redirect = require('./Redirect');
 5 | 
 6 | /**
 7 |  * Encapsulates a transition to a given path.
 8 |  *
 9 |  * The willTransitionTo and willTransitionFrom handlers receive
10 |  * an instance of this class as their first argument.
11 |  */
12 | function Transition(path, retry) {
13 |   this.path = path;
14 |   this.abortReason = null;
15 |   // TODO: Change this to router.retryTransition(transition)
16 |   this.retry = retry.bind(this);
17 | }
18 | 
19 | Transition.prototype.abort = function (reason) {
20 |   if (this.abortReason == null)
21 |     this.abortReason = reason || 'ABORT';
22 | };
23 | 
24 | Transition.prototype.redirect = function (to, params, query) {
25 |   this.abort(new Redirect(to, params, query));
26 | };
27 | 
28 | Transition.prototype.cancel = function () {
29 |   this.abort(new Cancellation);
30 | };
31 | 
32 | Transition.from = function (transition, routes, components, callback) {
33 |   routes.reduce(function (callback, route, index) {
34 |     return function (error) {
35 |       if (error || transition.abortReason) {
36 |         callback(error);
37 |       } else if (route.onLeave) {
38 |         try {
39 |           route.onLeave(transition, components[index], callback);
40 | 
41 |           // If there is no callback in the argument list, call it automatically.
42 |           if (route.onLeave.length < 3)
43 |             callback();
44 |         } catch (e) {
45 |           callback(e);
46 |         }
47 |       } else {
48 |         callback();
49 |       }
50 |     };
51 |   }, callback)();
52 | };
53 | 
54 | Transition.to = function (transition, routes, params, query, callback) {
55 |   routes.reduceRight(function (callback, route) {
56 |     return function (error) {
57 |       if (error || transition.abortReason) {
58 |         callback(error);
59 |       } else if (route.onEnter) {
60 |         try {
61 |           route.onEnter(transition, params, query, callback);
62 | 
63 |           // If there is no callback in the argument list, call it automatically.
64 |           if (route.onEnter.length < 4)
65 |             callback();
66 |         } catch (e) {
67 |           callback(e);
68 |         }
69 |       } else {
70 |         callback();
71 |       }
72 |     };
73 |   }, callback)();
74 | };
75 | 
76 | module.exports = Transition;
77 | 


--------------------------------------------------------------------------------
/modules/__tests__/History-test.js:
--------------------------------------------------------------------------------
 1 | var expect = require('expect');
 2 | var React = require('react');
 3 | var { Foo, RedirectToFoo } = require('../TestUtils');
 4 | var TestLocation = require('../locations/TestLocation');
 5 | var Route = require('../components/Route');
 6 | var History = require('../History');
 7 | var Router = require('../index');
 8 | 
 9 | describe('History', function () {
10 |   describe('on the initial page load', function () {
11 |     it('has length 1', function () {
12 |       expect(History.length).toEqual(1);
13 |     });
14 |   });
15 | 
16 |   describe('after navigating to a route', function () {
17 |     var location;
18 |     beforeEach(function () {
19 |       location = new TestLocation([ '/foo' ]);
20 |     });
21 | 
22 |     it('has length 2', function (done) {
23 |       var routes = [
24 |         <Route name="foo" handler={Foo}/>,
25 |         <Route name="about" handler={Foo}/>
26 |       ];
27 | 
28 |       var count = 0;
29 | 
30 |       var router = Router.run(routes, location, function (Handler) {
31 |         count += 1;
32 | 
33 |         if (count === 2) {
34 |           expect(History.length).toEqual(2);
35 |           done();
36 |         }
37 |       });
38 | 
39 |       router.transitionTo('about');
40 |     });
41 | 
42 |     describe('that redirects to another route', function () {
43 |       it('has length 2', function (done) {
44 |         var routes = [
45 |           <Route name="foo" handler={Foo}/>,
46 |           <Route name="about" handler={RedirectToFoo}/>
47 |         ];
48 | 
49 |         var count = 0;
50 | 
51 |         var router = Router.run(routes, location, function (Handler) {
52 |           count += 1;
53 | 
54 |           if (count === 2) {
55 |             expect(History.length).toEqual(2);
56 |             done();
57 |           }
58 |         });
59 | 
60 |         router.transitionTo('about');
61 |       });
62 |     });
63 |   });
64 | });
65 | 


--------------------------------------------------------------------------------
/modules/__tests__/Routing-test.js:
--------------------------------------------------------------------------------
 1 | var expect = require('expect');
 2 | var React = require('react');
 3 | var Router = require('../index');
 4 | var Route = require('../components/Route');
 5 | var { Foo, Bar, Nested } = require('../TestUtils');
 6 | 
 7 | describe('creating routes from ReactChildren', function () {
 8 |   it('works with falsy children', function (done) {
 9 |     var routes = [
10 |       <Route handler={Foo} path="/foo"/>,
11 |       null,
12 |       <Route handler={Bar} path="/bar"/>,
13 |       undefined
14 |     ];
15 | 
16 |     Router.run(routes, '/foo', function (Handler, state) {
17 |       var html = React.renderToString(<Handler/>);
18 |       expect(html).toMatch(/Foo/);
19 |       done();
20 |     });
21 |   });
22 | 
23 |   it('works with comments', function (done) {
24 |     var routes = [
25 |       <Route handler={Nested} path="/foo">
26 |         // This is a comment.
27 |         <Route handler={Bar} path="/bar"/>
28 |       </Route>
29 |     ];
30 | 
31 |     Router.run(routes, '/bar', function (Handler, state) {
32 |       var html = React.renderToString(<Handler/>);
33 |       expect(html).toMatch(/Bar/);
34 |       done();
35 |     });
36 |   });
37 | });
38 | 


--------------------------------------------------------------------------------
/modules/__tests__/State-test.js:
--------------------------------------------------------------------------------
 1 | var assert = require('assert');
 2 | var React = require('react');
 3 | var Router = require('../index');
 4 | var Route = require('../components/Route');
 5 | var TestLocation = require('../locations/TestLocation');
 6 | var { Foo } = require('../TestUtils');
 7 | 
 8 | describe('State', function () {
 9 | 
10 |   describe('when a route is active', function () {
11 |     describe('and it has no params', function () {
12 |       it('is active', function (done) {
13 |         var location = new TestLocation([ '/foo' ]);
14 |         var div = document.createElement('div');
15 |         var routes = (
16 |           <Route name="foo" handler={Foo}/>
17 |         );
18 | 
19 |         var router;
20 | 
21 |         Router.run(routes, location, function (Handler) {
22 |           router = this;
23 |           React.render(<Handler/>, div, function () {
24 |             assert(router.isActive('foo'));
25 |             done();
26 |           });
27 |         });
28 |       });
29 |     });
30 | 
31 |     describe('and the right params are given', function () {
32 |       var location, router;
33 |       var div = document.createElement('div');
34 |       var routes = <Route name="products" path="/products/:id/:variant" handler={Foo}/>;
35 | 
36 |       beforeEach(function (done) {
37 |         location = new TestLocation([ '/products/123/456?search=abc&limit=789' ]);
38 |         Router.run(routes, location, function (Handler) {
39 |           router = this;
40 |           React.render(<Handler/>, div, function () {
41 |             done();
42 |           });
43 |         });
44 |       });
45 | 
46 |       afterEach(function () {
47 |         React.unmountComponentAtNode(div);
48 |       });
49 | 
50 |       describe('and no query is used', function () {
51 |         it('is active', function () {
52 |           assert(router.isActive('products', { id: 123, variant: '456' }));
53 |         });
54 |       });
55 | 
56 |       describe('and a matching query is used', function () {
57 |         it('is active', function () {
58 |           assert(router.isActive('products', { id: 123 }, { search: 'abc' }));
59 |         });
60 |       });
61 | 
62 |       describe('but the query does not match', function () {
63 |         it('is not active', function () {
64 |           assert(router.isActive('products', { id: 123 }, { search: 'def' }) === false);
65 |         });
66 |       });
67 | 
68 |       describe('and the wrong params are given', function () {
69 |         it('is not active', function () {
70 |           assert(router.isActive('products', { id: 345 }) === false);
71 |         });
72 |       });
73 | 
74 |     });
75 |   });
76 | });
77 | 


--------------------------------------------------------------------------------
/modules/actions/LocationActions.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Actions that modify the URL.
 3 |  */
 4 | var LocationActions = {
 5 | 
 6 |   /**
 7 |    * Indicates a new location is being pushed to the history stack.
 8 |    */
 9 |   PUSH: 'push',
10 | 
11 |   /**
12 |    * Indicates the current location should be replaced.
13 |    */
14 |   REPLACE: 'replace',
15 | 
16 |   /**
17 |    * Indicates the most recent entry should be removed from the history stack.
18 |    */
19 |   POP: 'pop'
20 | 
21 | };
22 | 
23 | module.exports = LocationActions;
24 | 


--------------------------------------------------------------------------------
/modules/behaviors/ImitateBrowserBehavior.js:
--------------------------------------------------------------------------------
 1 | var LocationActions = require('../actions/LocationActions');
 2 | 
 3 | /**
 4 |  * A scroll behavior that attempts to imitate the default behavior
 5 |  * of modern browsers.
 6 |  */
 7 | var ImitateBrowserBehavior = {
 8 | 
 9 |   updateScrollPosition: function (position, actionType) {
10 |     switch (actionType) {
11 |       case LocationActions.PUSH:
12 |       case LocationActions.REPLACE:
13 |         window.scrollTo(0, 0);
14 |         break;
15 |       case LocationActions.POP:
16 |         if (position) {
17 |           window.scrollTo(position.x, position.y);
18 |         } else {
19 |           window.scrollTo(0, 0);
20 |         }
21 |         break;
22 |     }
23 |   }
24 | 
25 | };
26 | 
27 | module.exports = ImitateBrowserBehavior;
28 | 


--------------------------------------------------------------------------------
/modules/behaviors/ScrollToTopBehavior.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * A scroll behavior that always scrolls to the top of the page
 3 |  * after a transition.
 4 |  */
 5 | var ScrollToTopBehavior = {
 6 | 
 7 |   updateScrollPosition: function () {
 8 |     window.scrollTo(0, 0);
 9 |   }
10 | 
11 | };
12 | 
13 | module.exports = ScrollToTopBehavior;
14 | 


--------------------------------------------------------------------------------
/modules/components/ContextWrapper.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This component is necessary to get around a context warning
 3 |  * present in React 0.13.0. It sovles this by providing a separation
 4 |  * between the "owner" and "parent" contexts.
 5 |  */
 6 | 
 7 | var React = require('react');
 8 | 
 9 | class ContextWrapper extends React.Component {
10 | 
11 |   render() {
12 |     return this.props.children;
13 |   }
14 | 
15 | }
16 | 
17 | module.exports = ContextWrapper;
18 | 


--------------------------------------------------------------------------------
/modules/components/DefaultRoute.js:
--------------------------------------------------------------------------------
 1 | var PropTypes = require('../PropTypes');
 2 | var RouteHandler = require('./RouteHandler');
 3 | var Route = require('./Route');
 4 | 
 5 | /**
 6 |  * A <DefaultRoute> component is a special kind of <Route> that
 7 |  * renders when its parent matches but none of its siblings do.
 8 |  * Only one such route may be used at any given level in the
 9 |  * route hierarchy.
10 |  */
11 | class DefaultRoute extends Route {}
12 | 
13 | // TODO: Include these in the above class definition
14 | // once we can use ES7 property initializers.
15 | // https://github.com/babel/babel/issues/619
16 | 
17 | DefaultRoute.propTypes = {
18 |   name: PropTypes.string,
19 |   path: PropTypes.falsy,
20 |   children: PropTypes.falsy,
21 |   handler: PropTypes.func.isRequired
22 | };
23 | 
24 | DefaultRoute.defaultProps = {
25 |   handler: RouteHandler
26 | };
27 | 
28 | module.exports = DefaultRoute;
29 | 


--------------------------------------------------------------------------------
/modules/components/Link.js:
--------------------------------------------------------------------------------
  1 | var React = require('react');
  2 | var assign = require('react/lib/Object.assign');
  3 | var PropTypes = require('../PropTypes');
  4 | 
  5 | function isLeftClickEvent(event) {
  6 |   return event.button === 0;
  7 | }
  8 | 
  9 | function isModifiedEvent(event) {
 10 |   return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
 11 | }
 12 | 
 13 | /**
 14 |  * <Link> components are used to create an <a> element that links to a route.
 15 |  * When that route is active, the link gets an "active" class name (or the
 16 |  * value of its `activeClassName` prop).
 17 |  *
 18 |  * For example, assuming you have the following route:
 19 |  *
 20 |  *   <Route name="showPost" path="/posts/:postID" handler={Post}/>
 21 |  *
 22 |  * You could use the following component to link to that route:
 23 |  *
 24 |  *   <Link to="showPost" params={{ postID: "123" }} />
 25 |  *
 26 |  * In addition to params, links may pass along query string parameters
 27 |  * using the `query` prop.
 28 |  *
 29 |  *   <Link to="showPost" params={{ postID: "123" }} query={{ show:true }}/>
 30 |  */
 31 | class Link extends React.Component {
 32 | 
 33 |   handleClick(event) {
 34 |     var allowTransition = true;
 35 |     var clickResult;
 36 | 
 37 |     if (this.props.onClick)
 38 |       clickResult = this.props.onClick(event);
 39 | 
 40 |     if (isModifiedEvent(event) || !isLeftClickEvent(event))
 41 |       return;
 42 | 
 43 |     if (clickResult === false || event.defaultPrevented === true)
 44 |       allowTransition = false;
 45 | 
 46 |     event.preventDefault();
 47 | 
 48 |     if (allowTransition)
 49 |       this.context.router.transitionTo(this.props.to, this.props.params, this.props.query);
 50 |   }
 51 | 
 52 |   /**
 53 |    * Returns the value of the "href" attribute to use on the DOM element.
 54 |    */
 55 |   getHref() {
 56 |     return this.context.router.makeHref(this.props.to, this.props.params, this.props.query);
 57 |   }
 58 | 
 59 |   /**
 60 |    * Returns the value of the "class" attribute to use on the DOM element, which contains
 61 |    * the value of the activeClassName property when this <Link> is active.
 62 |    */
 63 |   getClassName() {
 64 |     var className = this.props.className
 65 | 
 66 |     if (this.getActiveState())
 67 |       className += ` ${ this.props.activeClassName }`
 68 | 
 69 |     return className
 70 |   }
 71 | 
 72 |   getActiveState() {
 73 |     return this.context.router.isActive(this.props.to, this.props.params, this.props.query);
 74 |   }
 75 | 
 76 |   render() {
 77 |     var props = assign({}, this.props, {
 78 |       href: this.getHref(),
 79 |       className: this.getClassName(),
 80 |       onClick: this.handleClick.bind(this)
 81 |     });
 82 | 
 83 |     if (props.activeStyle && this.getActiveState())
 84 |       props.style = props.activeStyle;
 85 | 
 86 |     return React.DOM.a(props, this.props.children);
 87 |   }
 88 | 
 89 | }
 90 | 
 91 | // TODO: Include these in the above class definition
 92 | // once we can use ES7 property initializers.
 93 | // https://github.com/babel/babel/issues/619
 94 | 
 95 | Link.contextTypes = {
 96 |   router: PropTypes.router.isRequired
 97 | };
 98 | 
 99 | Link.propTypes = {
100 |   activeClassName: PropTypes.string.isRequired,
101 |   to: PropTypes.oneOfType([ PropTypes.string, PropTypes.route ]).isRequired,
102 |   params: PropTypes.object,
103 |   query: PropTypes.object,
104 |   activeStyle: PropTypes.object,
105 |   onClick: PropTypes.func
106 | };
107 | 
108 | Link.defaultProps = {
109 |   activeClassName: 'active',
110 |   className: ''
111 | };
112 | 
113 | module.exports = Link;
114 | 


--------------------------------------------------------------------------------
/modules/components/NotFoundRoute.js:
--------------------------------------------------------------------------------
 1 | var PropTypes = require('../PropTypes');
 2 | var RouteHandler = require('./RouteHandler');
 3 | var Route = require('./Route');
 4 | 
 5 | /**
 6 |  * A <NotFoundRoute> is a special kind of <Route> that
 7 |  * renders when the beginning of its parent's path matches
 8 |  * but none of its siblings do, including any <DefaultRoute>.
 9 |  * Only one such route may be used at any given level in the
10 |  * route hierarchy.
11 |  */
12 | class NotFoundRoute extends Route {}
13 | 
14 | // TODO: Include these in the above class definition
15 | // once we can use ES7 property initializers.
16 | // https://github.com/babel/babel/issues/619
17 | 
18 | NotFoundRoute.propTypes = {
19 |   name: PropTypes.string,
20 |   path: PropTypes.falsy,
21 |   children: PropTypes.falsy,
22 |   handler: PropTypes.func.isRequired
23 | };
24 | 
25 | NotFoundRoute.defaultProps = {
26 |   handler: RouteHandler
27 | };
28 | 
29 | module.exports = NotFoundRoute;
30 | 


--------------------------------------------------------------------------------
/modules/components/Redirect.js:
--------------------------------------------------------------------------------
 1 | var PropTypes = require('../PropTypes');
 2 | var Route = require('./Route');
 3 | 
 4 | /**
 5 |  * A <Redirect> component is a special kind of <Route> that always
 6 |  * redirects to another route when it matches.
 7 |  */
 8 | class Redirect extends Route {}
 9 | 
10 | // TODO: Include these in the above class definition
11 | // once we can use ES7 property initializers.
12 | // https://github.com/babel/babel/issues/619
13 | 
14 | 
15 | Redirect.propTypes = {
16 |   path: PropTypes.string,
17 |   from: PropTypes.string, // Alias for path.
18 |   to: PropTypes.string,
19 |   handler: PropTypes.falsy
20 | };
21 | 
22 | // Redirects should not have a default handler
23 | Redirect.defaultProps = {};
24 | 
25 | module.exports = Redirect;
26 | 


--------------------------------------------------------------------------------
/modules/components/Route.js:
--------------------------------------------------------------------------------
 1 | var React = require('react');
 2 | var invariant = require('react/lib/invariant');
 3 | var PropTypes = require('../PropTypes');
 4 | var RouteHandler = require('./RouteHandler');
 5 | 
 6 | /**
 7 |  * <Route> components specify components that are rendered to the page when the
 8 |  * URL matches a given pattern.
 9 |  *
10 |  * Routes are arranged in a nested tree structure. When a new URL is requested,
11 |  * the tree is searched depth-first to find a route whose path matches the URL.
12 |  * When one is found, all routes in the tree that lead to it are considered
13 |  * "active" and their components are rendered into the DOM, nested in the same
14 |  * order as they are in the tree.
15 |  *
16 |  * The preferred way to configure a router is using JSX. The XML-like syntax is
17 |  * a great way to visualize how routes are laid out in an application.
18 |  *
19 |  *   var routes = [
20 |  *     <Route handler={App}>
21 |  *       <Route name="login" handler={Login}/>
22 |  *       <Route name="logout" handler={Logout}/>
23 |  *       <Route name="about" handler={About}/>
24 |  *     </Route>
25 |  *   ];
26 |  *   
27 |  *   Router.run(routes, function (Handler) {
28 |  *     React.render(<Handler/>, document.body);
29 |  *   });
30 |  *
31 |  * Handlers for Route components that contain children can render their active
32 |  * child route using a <RouteHandler> element.
33 |  *
34 |  *   var App = React.createClass({
35 |  *     render: function () {
36 |  *       return (
37 |  *         <div class="application">
38 |  *           <RouteHandler/>
39 |  *         </div>
40 |  *       );
41 |  *     }
42 |  *   });
43 |  *
44 |  * If no handler is provided for the route, it will render a matched child route.
45 |  */
46 | class Route extends React.Component {
47 | 
48 |   render() {
49 |     invariant(
50 |       false,
51 |       '%s elements are for router configuration only and should not be rendered',
52 |       this.constructor.name
53 |     );
54 |   }
55 | 
56 | }
57 | 
58 | // TODO: Include these in the above class definition
59 | // once we can use ES7 property initializers.
60 | // https://github.com/babel/babel/issues/619
61 | 
62 | Route.propTypes = {
63 |   name: PropTypes.string,
64 |   path: PropTypes.string,
65 |   handler: PropTypes.func,
66 |   ignoreScrollBehavior: PropTypes.bool
67 | };
68 | 
69 | Route.defaultProps = {
70 |   handler: RouteHandler
71 | };
72 | 
73 | module.exports = Route;
74 | 


--------------------------------------------------------------------------------
/modules/components/RouteHandler.js:
--------------------------------------------------------------------------------
 1 | var React = require('react');
 2 | var ContextWrapper = require('./ContextWrapper')
 3 | var assign = require('react/lib/Object.assign');
 4 | var PropTypes = require('../PropTypes');
 5 | 
 6 | var REF_NAME = '__routeHandler__';
 7 | 
 8 | /**
 9 |  * A <RouteHandler> component renders the active child route handler
10 |  * when routes are nested.
11 |  */
12 | class RouteHandler extends React.Component {
13 | 
14 |   getChildContext() {
15 |     return {
16 |       routeDepth: this.context.routeDepth + 1
17 |     };
18 |   }
19 | 
20 |   componentDidMount() {
21 |     this._updateRouteComponent(this.refs[REF_NAME]);
22 |   }
23 | 
24 |   componentDidUpdate() {
25 |     this._updateRouteComponent(this.refs[REF_NAME]);
26 |   }
27 | 
28 |   componentWillUnmount() {
29 |     this._updateRouteComponent(null);
30 |   }
31 | 
32 |   _updateRouteComponent(component) {
33 |     this.context.router.setRouteComponentAtDepth(this.getRouteDepth(), component);
34 |   }
35 | 
36 |   getRouteDepth() {
37 |     return this.context.routeDepth;
38 |   }
39 | 
40 |   createChildRouteHandler(props) {
41 |     var route = this.context.router.getRouteAtDepth(this.getRouteDepth());
42 |     return route ? React.createElement(route.handler, assign({}, props || this.props, { ref: REF_NAME })) : null;
43 |   }
44 | 
45 |   render() {
46 |     var handler = this.createChildRouteHandler();
47 |     // <script/> for things like <CSSTransitionGroup/> that don't like null
48 |     return handler ? <ContextWrapper>{handler}</ContextWrapper> : <script/>;
49 |   }
50 | 
51 | }
52 | 
53 | // TODO: Include these in the above class definition
54 | // once we can use ES7 property initializers.
55 | // https://github.com/babel/babel/issues/619
56 | 
57 | RouteHandler.contextTypes = {
58 |   routeDepth: PropTypes.number.isRequired,
59 |   router: PropTypes.router.isRequired
60 | };
61 | 
62 | RouteHandler.childContextTypes = {
63 |   routeDepth: PropTypes.number.isRequired
64 | };
65 | 
66 | module.exports = RouteHandler;
67 | 


--------------------------------------------------------------------------------
/modules/components/__tests__/DefaultRoute-test.js:
--------------------------------------------------------------------------------
 1 | var expect = require('expect');
 2 | var React = require('react');
 3 | var Router = require('../../index');
 4 | var DefaultRoute = require('../DefaultRoute');
 5 | var Route = require('../Route');
 6 | var { Foo, Nested } = require('../../TestUtils');
 7 | 
 8 | describe('DefaultRoute', function () {
 9 | 
10 |   it('renders when the parent route path matches', function () {
11 |     var routes = (
12 |       <Route path='/' handler={Nested}>
13 |         <DefaultRoute handler={Foo} />
14 |       </Route>
15 |     );
16 | 
17 |     Router.run(routes, '/', function (App) {
18 |       var html = React.renderToString(<App/>);
19 |       expect(html).toMatch(/Nested/);
20 |       expect(html).toMatch(/Foo/);
21 |     });
22 |   });
23 | 
24 |   it('renders when nested more than one level', function () {
25 |     var routes = (
26 |       <Route path='/' handler={Nested}>
27 |         <Route path='/foo' handler={Nested}>
28 |           <DefaultRoute handler={Foo} />
29 |         </Route>
30 |       </Route>
31 |     );
32 | 
33 |     Router.run(routes, '/foo', function (App) {
34 |       var html = React.renderToString(<App/>);
35 |       expect(html).toMatch(/Nested/);
36 |       expect(html).toMatch(/Foo/);
37 |     });
38 |   });
39 | 
40 |   describe('with a name', function () {
41 |     it('renders when the parent route path matches', function () {
42 |       var routes = (
43 |         <Route path='/' handler={Nested}>
44 |           <DefaultRoute name="root" handler={Foo} />
45 |         </Route>
46 |       );
47 | 
48 |       Router.run(routes, '/', function (App) {
49 |         var html = React.renderToString(<App/>);
50 |         expect(html).toMatch(/Nested/);
51 |         expect(html).toMatch(/Foo/);
52 |       });
53 |     });
54 |   });
55 | 
56 | });
57 | 


--------------------------------------------------------------------------------
/modules/components/__tests__/NotFoundRoute-test.js:
--------------------------------------------------------------------------------
 1 | var expect = require('expect');
 2 | var React = require('react');
 3 | var Router = require('../../index');
 4 | var NotFoundRoute = require('../NotFoundRoute');
 5 | var Route = require('../Route');
 6 | var { Nested, Foo, Bar } = require('../../TestUtils');
 7 | 
 8 | describe('NotFoundRoute', function () {
 9 | 
10 |   describe('at the root of the config', function () {
11 |     it('renders when no other routes match', function () {
12 |       var routes = <NotFoundRoute handler={Bar}/>;
13 |       Router.run(routes, '/ryans-patience', function (Handler) {
14 |         var html = React.renderToString(<Handler />);
15 |         expect(html).toMatch(/Bar/);
16 |       });
17 |     });
18 |   });
19 | 
20 |   describe('nested in the config', function () {
21 |     it('renders when none of its siblings match', function () {
22 |       var routes = (
23 |         <Route path='/' handler={Nested}>
24 |           <Route path='/foo' handler={Foo}/>
25 |           <NotFoundRoute handler={Bar} />
26 |         </Route>
27 |       );
28 | 
29 |       Router.run(routes, '/ryans-mind', function (Handler) {
30 |         var html = React.renderToString(<Handler/>);
31 |         expect(html).toMatch(/Bar/);
32 |       });
33 |     });
34 |   });
35 | 
36 |   describe('deeply nested in the config', function () {
37 |     var routes = (
38 |       <Route path='/' handler={Nested}>
39 |         <Route path='ryans' handler={Nested}>
40 |           {/* order shouldn't matter here, so we put it first */}
41 |           <NotFoundRoute handler={Bar} />
42 |           <Route path='happiness' handler={Foo}/>
43 |         </Route>
44 |       </Route>
45 |     );
46 | 
47 |     it('renders the matching parents and itself', function () {
48 |       Router.run(routes, '/ryans/compassion', function (Handler) {
49 |         var html = React.renderToString(<Handler />);
50 |         expect(html).toMatch(/Nested/);
51 |         expect(html).toMatch(/Bar/);
52 |       });
53 |     });
54 | 
55 |     it('does not match if a sibling matches', function () {
56 |       Router.run(routes, '/ryans/happiness', function (Handler) {
57 |         var html = React.renderToString(<Handler />);
58 |         expect(html).toMatch(/Nested/);
59 |         expect(html).toMatch(/Foo/);
60 |       });
61 |     });
62 |   });
63 | 
64 |   describe('with a name', function () {
65 |     it('renders when none of its siblings match', function () {
66 |       var routes = (
67 |         <Route path='/' handler={Nested}>
68 |           <Route path='/foo' handler={Foo}/>
69 |           <NotFoundRoute name="not-found" handler={Bar} />
70 |         </Route>
71 |       );
72 | 
73 |       Router.run(routes, '/ryans-mind', function (Handler) {
74 |         var html = React.renderToString(<Handler/>);
75 |         expect(html).toMatch(/Bar/);
76 |       });
77 |     });
78 |   });
79 | 
80 | });
81 | 


--------------------------------------------------------------------------------
/modules/components/__tests__/Redirect-test.js:
--------------------------------------------------------------------------------
 1 | var expect = require('expect');
 2 | var React = require('react');
 3 | var Router = require('../../index');
 4 | var TestLocation = require('../../locations/TestLocation');
 5 | var { Nested, Bar } = require('../../TestUtils');
 6 | var Redirect = require('../Redirect');
 7 | var Route = require('../Route');
 8 | 
 9 | describe('Redirect', function () {
10 | 
11 |   it('defaults the path to "*"', function () {
12 |     var location = new TestLocation([ '/kljfsdlfkjsdf' ]);
13 | 
14 |     var div = document.createElement('div');
15 |     var routes = [
16 |       <Route path="/bar" handler={Bar}/>,
17 |       <Redirect to="/bar"/>
18 |     ];
19 | 
20 |     Router.run(routes, location, function (Handler) {
21 |       React.render(<Handler />, div);
22 |       expect(div.innerHTML).toMatch(/Bar/);
23 |     });
24 |   });
25 | 
26 |   describe('at the root of the config', function () {
27 |     it('redirects', function () {
28 |       var location = new TestLocation([ '/foo' ]);
29 | 
30 |       var div = document.createElement('div');
31 |       var routes = [
32 |         <Redirect from="/foo" to="/bar"/>,
33 |         <Route path="/bar" handler={Bar}/>
34 |       ];
35 | 
36 |       Router.run(routes, location, function (Handler) {
37 |         React.render(<Handler />, div);
38 |         expect(div.innerHTML).toMatch(/Bar/);
39 |       });
40 |     });
41 |   });
42 | 
43 |   describe('nested deeply in the config', function () {
44 |     it('redirects with absolute paths', function () {
45 |       var location = new TestLocation([ '/foo/bar' ]);
46 | 
47 |       var div = document.createElement('div');
48 |       var routes = (
49 |         <Route path="/" handler={Nested}>
50 |           <Route path="foo" handler={Nested}>
51 |             <Redirect from="/foo/bar" to="/baz" />
52 |           </Route>
53 |           <Route path="baz" handler={Bar}/>
54 |         </Route>
55 |       );
56 | 
57 |       Router.run(routes, location, function (Handler) {
58 |         React.render(<Handler />, div);
59 |         expect(div.innerHTML).toMatch(/Bar/);
60 |       });
61 |     });
62 | 
63 |     it('redirects with relative paths', function () {
64 |       var location = new TestLocation([ '/foo/bar' ]);
65 | 
66 |       var div = document.createElement('div');
67 |       var routes = (
68 |         <Route path="/" handler={Nested}>
69 |           <Route path="foo" handler={Nested}>
70 |             <Redirect from="bar" to="/baz" />
71 |           </Route>
72 |           <Route path="baz" handler={Bar}/>
73 |         </Route>
74 |       );
75 | 
76 |       Router.run(routes, location, function (Handler) {
77 |         React.render(<Handler />, div);
78 |         expect(div.innerHTML).toMatch(/Bar/);
79 |       });
80 |     });
81 |   });
82 | 
83 | });
84 | 


--------------------------------------------------------------------------------
/modules/components/__tests__/Route-test.js:
--------------------------------------------------------------------------------
 1 | var expect = require('expect');
 2 | var React = require('react');
 3 | var Router = require('../../index');
 4 | var DefaultRoute = require('../DefaultRoute');
 5 | var Route = require('../Route');
 6 | var { Foo, Bar } = require('../../TestUtils');
 7 | 
 8 | describe('Route', function () {
 9 | 
10 |   it('renders default child route if path match but no handler provided', function () {
11 |     var routes = (
12 |       <Route path='/'>
13 |         <Route path='/bar' handler={Bar} />
14 |         <DefaultRoute handler={Foo} />
15 |       </Route>
16 |     );
17 | 
18 |     Router.run(routes, '/', function (App) {
19 |       var html = React.renderToString(<App/>);
20 |       expect(html).toMatch(/Foo/);
21 |     });
22 |   });
23 | 
24 |   it('renders matched child route if no handler provided', function () {
25 |     var routes = (
26 |       <Route path='/'>
27 |         <Route path='/bar' handler={Bar} />
28 |         <DefaultRoute handler={Foo} />
29 |       </Route>
30 |     );
31 | 
32 |     Router.run(routes, '/bar', function (App) {
33 |       var html = React.renderToString(<App/>);
34 |       expect(html).toMatch(/Bar/);
35 |     });
36 |   });
37 | 
38 | });
39 | 


--------------------------------------------------------------------------------
/modules/components/__tests__/RouteHandler-test.js:
--------------------------------------------------------------------------------
  1 | var expect = require('expect');
  2 | var React = require('react');
  3 | var Router = require('../../index');
  4 | var Route = require('../Route');
  5 | var RouteHandler = require('../RouteHandler');
  6 | var TestLocation = require('../../locations/TestLocation');
  7 | var { Bar, Foo } = require('../../TestUtils');
  8 | 
  9 | describe('RouteHandler', function () {
 10 | 
 11 |   it('uses the old handler until the top-level component is rendered again', function (done) {
 12 |     var updateComponentBeforeNextRender;
 13 |     var location = new TestLocation([ '/foo' ]);
 14 | 
 15 |     var Root = React.createClass({
 16 |       componentDidMount: function () {
 17 |         updateComponentBeforeNextRender = function (cb) {
 18 |           this.forceUpdate(cb);
 19 |         }.bind(this);
 20 |       },
 21 | 
 22 |       render: function () {
 23 |         return (
 24 |           <div>
 25 |             <h1>Root</h1>
 26 |             <RouteHandler/>
 27 |           </div>
 28 |         );
 29 |       }
 30 |     });
 31 | 
 32 |     var routes = (
 33 |       <Route name="root" handler={Root} path='/'>
 34 |         <Route name="foo" handler={Foo} path='/foo'/>
 35 |         <Route name="bar" handler={Bar} path='/bar'/>
 36 |       </Route>
 37 |     );
 38 | 
 39 |     var div = document.createElement('div');
 40 |     var steps = [];
 41 | 
 42 |     steps.push(function (Handler, state) {
 43 |       React.render(<Handler/>, div, function () {
 44 |         expect(div.innerHTML).toMatch(/Foo/);
 45 |         location.push('/bar');
 46 |       });
 47 |     });
 48 | 
 49 |     steps.push(function (Handler, state) {
 50 |       updateComponentBeforeNextRender(function () {
 51 |         expect(div.innerHTML).toMatch(/Foo/);
 52 |         React.render(<Handler/>, div, function () {
 53 |           expect(div.innerHTML).toMatch(/Bar/);
 54 |           done();
 55 |         });
 56 |       });
 57 |     });
 58 | 
 59 |     Router.run(routes, location, function () {
 60 |       steps.shift().apply(this, arguments);
 61 |     });
 62 |   });
 63 | 
 64 |   it('renders after an update', function (done) {
 65 |     var Nested = React.createClass({
 66 |       componentDidMount: function () {
 67 |         this.forceUpdate(finishTest);
 68 |       },
 69 |       render: function () {
 70 |         return (
 71 |           <div>
 72 |             hello
 73 |             <RouteHandler />
 74 |           </div>
 75 |         );
 76 |       }
 77 |     });
 78 | 
 79 |     var Foo = React.createClass({
 80 |       render: function () {
 81 |         return <div>foo</div>;
 82 |       }
 83 |     });
 84 | 
 85 |     var routes = (
 86 |       <Route path='/' handler={Nested}>
 87 |         <Route path='foo' handler={Foo}/>
 88 |       </Route>
 89 |     );
 90 | 
 91 |     var div = document.createElement('div');
 92 | 
 93 |     Router.run(routes, '/foo', function (App) {
 94 |       React.render(<App />, div);
 95 |     });
 96 | 
 97 |     function finishTest() {
 98 |       expect(div.innerHTML).toMatch(/hello/);
 99 |       expect(div.innerHTML).toMatch(/foo/);
100 |       done();
101 |     }
102 |   });
103 | 
104 | });
105 | 


--------------------------------------------------------------------------------
/modules/createRoutesFromReactChildren.js:
--------------------------------------------------------------------------------
 1 | /* jshint -W084 */
 2 | var React = require('react');
 3 | var assign = require('react/lib/Object.assign');
 4 | var warning = require('react/lib/warning');
 5 | var DefaultRoute = require('./components/DefaultRoute');
 6 | var NotFoundRoute = require('./components/NotFoundRoute');
 7 | var Redirect = require('./components/Redirect');
 8 | var Route = require('./Route');
 9 | 
10 | function checkPropTypes(componentName, propTypes, props) {
11 |   componentName = componentName || 'UnknownComponent';
12 | 
13 |   for (var propName in propTypes) {
14 |     if (propTypes.hasOwnProperty(propName)) {
15 |       var error = propTypes[propName](props, propName, componentName);
16 | 
17 |       if (error instanceof Error)
18 |         warning(false, error.message);
19 |     }
20 |   }
21 | }
22 | 
23 | function createRouteOptions(props) {
24 |   var options = assign({}, props);
25 |   var handler = options.handler;
26 | 
27 |   if (handler) {
28 |     options.onEnter = handler.willTransitionTo;
29 |     options.onLeave = handler.willTransitionFrom;
30 |   }
31 | 
32 |   return options;
33 | }
34 | 
35 | function createRouteFromReactElement(element) {
36 |   if (!React.isValidElement(element))
37 |     return;
38 | 
39 |   var type = element.type;
40 |   var props = assign({}, type.defaultProps, element.props);
41 | 
42 |   if (type.propTypes)
43 |     checkPropTypes(type.displayName, type.propTypes, props);
44 | 
45 |   if (type === DefaultRoute)
46 |     return Route.createDefaultRoute(createRouteOptions(props));
47 | 
48 |   if (type === NotFoundRoute)
49 |     return Route.createNotFoundRoute(createRouteOptions(props));
50 | 
51 |   if (type === Redirect)
52 |     return Route.createRedirect(createRouteOptions(props));
53 | 
54 |   return Route.createRoute(createRouteOptions(props), function () {
55 |     if (props.children)
56 |       createRoutesFromReactChildren(props.children);
57 |   });
58 | }
59 | 
60 | /**
61 |  * Creates and returns an array of routes created from the given
62 |  * ReactChildren, all of which should be one of <Route>, <DefaultRoute>,
63 |  * <NotFoundRoute>, or <Redirect>, e.g.:
64 |  *
65 |  *   var { createRoutesFromReactChildren, Route, Redirect } = require('react-router');
66 |  *
67 |  *   var routes = createRoutesFromReactChildren(
68 |  *     <Route path="/" handler={App}>
69 |  *       <Route name="user" path="/user/:userId" handler={User}>
70 |  *         <Route name="task" path="tasks/:taskId" handler={Task}/>
71 |  *         <Redirect from="todos/:taskId" to="task"/>
72 |  *       </Route>
73 |  *     </Route>
74 |  *   );
75 |  */
76 | function createRoutesFromReactChildren(children) {
77 |   var routes = [];
78 | 
79 |   React.Children.forEach(children, function (child) {
80 |     if (child = createRouteFromReactElement(child))
81 |       routes.push(child);
82 |   });
83 | 
84 |   return routes;
85 | }
86 | 
87 | module.exports = createRoutesFromReactChildren;
88 | 


--------------------------------------------------------------------------------
/modules/getWindowScrollPosition.js:
--------------------------------------------------------------------------------
 1 | var invariant = require('react/lib/invariant');
 2 | var canUseDOM = require('react/lib/ExecutionEnvironment').canUseDOM;
 3 | 
 4 | /**
 5 |  * Returns the current scroll position of the window as { x, y }.
 6 |  */
 7 | function getWindowScrollPosition() {
 8 |   invariant(
 9 |     canUseDOM,
10 |     'Cannot get current scroll position without a DOM'
11 |   );
12 | 
13 |   return {
14 |     x: window.pageXOffset || document.documentElement.scrollLeft,
15 |     y: window.pageYOffset || document.documentElement.scrollTop
16 |   };
17 | }
18 | 
19 | module.exports = getWindowScrollPosition;
20 | 


--------------------------------------------------------------------------------
/modules/index.js:
--------------------------------------------------------------------------------
 1 | exports.DefaultRoute = require('./components/DefaultRoute');
 2 | exports.Link = require('./components/Link');
 3 | exports.NotFoundRoute = require('./components/NotFoundRoute');
 4 | exports.Redirect = require('./components/Redirect');
 5 | exports.Route = require('./components/Route');
 6 | exports.RouteHandler = require('./components/RouteHandler');
 7 | 
 8 | exports.HashLocation = require('./locations/HashLocation');
 9 | exports.HistoryLocation = require('./locations/HistoryLocation');
10 | exports.RefreshLocation = require('./locations/RefreshLocation');
11 | exports.StaticLocation = require('./locations/StaticLocation');
12 | exports.TestLocation = require('./locations/TestLocation');
13 | 
14 | exports.ImitateBrowserBehavior = require('./behaviors/ImitateBrowserBehavior');
15 | exports.ScrollToTopBehavior = require('./behaviors/ScrollToTopBehavior');
16 | 
17 | exports.History = require('./History');
18 | exports.Navigation = require('./Navigation');
19 | exports.State = require('./State');
20 | 
21 | exports.createRoute = require('./Route').createRoute;
22 | exports.createDefaultRoute = require('./Route').createDefaultRoute;
23 | exports.createNotFoundRoute = require('./Route').createNotFoundRoute;
24 | exports.createRedirect = require('./Route').createRedirect;
25 | exports.createRoutesFromReactChildren = require('./createRoutesFromReactChildren');
26 | exports.create = require('./createRouter');
27 | exports.run = require('./runRouter');
28 | 
29 | 


--------------------------------------------------------------------------------
/modules/isReactChildren.js:
--------------------------------------------------------------------------------
 1 | var React = require('react');
 2 | 
 3 | function isValidChild(object) {
 4 |   return object == null || React.isValidElement(object);
 5 | }
 6 | 
 7 | function isReactChildren(object) {
 8 |   return isValidChild(object) || (Array.isArray(object) && object.every(isValidChild));
 9 | }
10 | 
11 | module.exports = isReactChildren;
12 | 


--------------------------------------------------------------------------------
/modules/locations/HashLocation.js:
--------------------------------------------------------------------------------
  1 | var LocationActions = require('../actions/LocationActions');
  2 | var History = require('../History');
  3 | 
  4 | var _listeners = [];
  5 | var _isListening = false;
  6 | var _actionType;
  7 | 
  8 | function notifyChange(type) {
  9 |   if (type === LocationActions.PUSH)
 10 |     History.length += 1;
 11 | 
 12 |   var change = {
 13 |     path: HashLocation.getCurrentPath(),
 14 |     type: type
 15 |   };
 16 | 
 17 |   _listeners.forEach(function (listener) {
 18 |     listener.call(HashLocation, change);
 19 |   });
 20 | }
 21 | 
 22 | function ensureSlash() {
 23 |   var path = HashLocation.getCurrentPath();
 24 | 
 25 |   if (path.charAt(0) === '/')
 26 |     return true;
 27 | 
 28 |   HashLocation.replace('/' + path);
 29 | 
 30 |   return false;
 31 | }
 32 | 
 33 | function onHashChange() {
 34 |   if (ensureSlash()) {
 35 |     // If we don't have an _actionType then all we know is the hash
 36 |     // changed. It was probably caused by the user clicking the Back
 37 |     // button, but may have also been the Forward button or manual
 38 |     // manipulation. So just guess 'pop'.
 39 |     var curActionType = _actionType;
 40 |     _actionType = null;
 41 |     notifyChange(curActionType || LocationActions.POP);
 42 |   }
 43 | }
 44 | 
 45 | /**
 46 |  * A Location that uses `window.location.hash`.
 47 |  */
 48 | var HashLocation = {
 49 | 
 50 |   addChangeListener(listener) {
 51 |     _listeners.push(listener);
 52 | 
 53 |     // Do this BEFORE listening for hashchange.
 54 |     ensureSlash();
 55 | 
 56 |     if (!_isListening) {
 57 |       if (window.addEventListener) {
 58 |         window.addEventListener('hashchange', onHashChange, false);
 59 |       } else {
 60 |         window.attachEvent('onhashchange', onHashChange);
 61 |       }
 62 | 
 63 |       _isListening = true;
 64 |     }
 65 |   },
 66 | 
 67 |   removeChangeListener(listener) {
 68 |     _listeners = _listeners.filter(function (l) {
 69 |       return l !== listener;
 70 |     });
 71 | 
 72 |     if (_listeners.length === 0) {
 73 |       if (window.removeEventListener) {
 74 |         window.removeEventListener('hashchange', onHashChange, false);
 75 |       } else {
 76 |         window.removeEvent('onhashchange', onHashChange);
 77 |       }
 78 | 
 79 |       _isListening = false;
 80 |     }
 81 |   },
 82 | 
 83 |   push(path) {
 84 |     _actionType = LocationActions.PUSH;
 85 |     window.location.hash = path;
 86 |   },
 87 | 
 88 |   replace(path) {
 89 |     _actionType = LocationActions.REPLACE;
 90 |     window.location.replace(
 91 |       window.location.pathname + window.location.search + '#' + path
 92 |     );
 93 |   },
 94 | 
 95 |   pop() {
 96 |     _actionType = LocationActions.POP;
 97 |     History.back();
 98 |   },
 99 | 
100 |   getCurrentPath() {
101 |     return decodeURI(
102 |       // We can't use window.location.hash here because it's not
103 |       // consistent across browsers - Firefox will pre-decode it!
104 |       window.location.href.split('#')[1] || ''
105 |     );
106 |   },
107 | 
108 |   toString() {
109 |     return '<HashLocation>';
110 |   }
111 | 
112 | };
113 | 
114 | module.exports = HashLocation;
115 | 


--------------------------------------------------------------------------------
/modules/locations/HistoryLocation.js:
--------------------------------------------------------------------------------
 1 | var LocationActions = require('../actions/LocationActions');
 2 | var History = require('../History');
 3 | 
 4 | var _listeners = [];
 5 | var _isListening = false;
 6 | 
 7 | function notifyChange(type) {
 8 |   var change = {
 9 |     path: HistoryLocation.getCurrentPath(),
10 |     type: type
11 |   };
12 | 
13 |   _listeners.forEach(function (listener) {
14 |     listener.call(HistoryLocation, change);
15 |   });
16 | }
17 | 
18 | function onPopState(event) {
19 |   if (event.state === undefined)
20 |     return; // Ignore extraneous popstate events in WebKit.
21 | 
22 |   notifyChange(LocationActions.POP);
23 | }
24 | 
25 | /**
26 |  * A Location that uses HTML5 history.
27 |  */
28 | var HistoryLocation = {
29 | 
30 |   addChangeListener(listener) {
31 |     _listeners.push(listener);
32 | 
33 |     if (!_isListening) {
34 |       if (window.addEventListener) {
35 |         window.addEventListener('popstate', onPopState, false);
36 |       } else {
37 |         window.attachEvent('onpopstate', onPopState);
38 |       }
39 | 
40 |       _isListening = true;
41 |     }
42 |   },
43 | 
44 |   removeChangeListener(listener) {
45 |     _listeners = _listeners.filter(function (l) {
46 |       return l !== listener;
47 |     });
48 | 
49 |     if (_listeners.length === 0) {
50 |       if (window.addEventListener) {
51 |         window.removeEventListener('popstate', onPopState, false);
52 |       } else {
53 |         window.removeEvent('onpopstate', onPopState);
54 |       }
55 | 
56 |       _isListening = false;
57 |     }
58 |   },
59 | 
60 |   push(path) {
61 |     window.history.pushState({ path: path }, '', path);
62 |     History.length += 1;
63 |     notifyChange(LocationActions.PUSH);
64 |   },
65 | 
66 |   replace(path) {
67 |     window.history.replaceState({ path: path }, '', path);
68 |     notifyChange(LocationActions.REPLACE);
69 |   },
70 | 
71 |   pop: History.back,
72 | 
73 |   getCurrentPath() {
74 |     return decodeURI(
75 |       window.location.pathname + window.location.search
76 |     );
77 |   },
78 | 
79 |   toString() {
80 |     return '<HistoryLocation>';
81 |   }
82 | 
83 | };
84 | 
85 | module.exports = HistoryLocation;
86 | 


--------------------------------------------------------------------------------
/modules/locations/RefreshLocation.js:
--------------------------------------------------------------------------------
 1 | var HistoryLocation = require('./HistoryLocation');
 2 | var History = require('../History');
 3 | 
 4 | /**
 5 |  * A Location that uses full page refreshes. This is used as
 6 |  * the fallback for HistoryLocation in browsers that do not
 7 |  * support the HTML5 history API.
 8 |  */
 9 | var RefreshLocation = {
10 | 
11 |   push(path) {
12 |     window.location = path;
13 |   },
14 | 
15 |   replace(path) {
16 |     window.location.replace(path);
17 |   },
18 | 
19 |   pop: History.back,
20 | 
21 |   getCurrentPath: HistoryLocation.getCurrentPath,
22 | 
23 |   toString() {
24 |     return '<RefreshLocation>';
25 |   }
26 | 
27 | };
28 | 
29 | module.exports = RefreshLocation;
30 | 


--------------------------------------------------------------------------------
/modules/locations/StaticLocation.js:
--------------------------------------------------------------------------------
 1 | var invariant = require('react/lib/invariant');
 2 | 
 3 | function throwCannotModify() {
 4 |   invariant(false, 'You cannot modify a static location');
 5 | }
 6 | 
 7 | /**
 8 |  * A location that only ever contains a single path. Useful in
 9 |  * stateless environments like servers where there is no path history,
10 |  * only the path that was used in the request.
11 |  */
12 | class StaticLocation {
13 | 
14 |   constructor(path) {
15 |     this.path = path;
16 |   }
17 | 
18 |   getCurrentPath() {
19 |     return this.path;
20 |   }
21 | 
22 |   toString() {
23 |     return `<StaticLocation path="${this.path}">`;
24 |   }
25 | 
26 | }
27 | 
28 | // TODO: Include these in the above class definition
29 | // once we can use ES7 property initializers.
30 | // https://github.com/babel/babel/issues/619
31 | 
32 | StaticLocation.prototype.push = throwCannotModify;
33 | StaticLocation.prototype.replace = throwCannotModify;
34 | StaticLocation.prototype.pop = throwCannotModify;
35 | 
36 | module.exports = StaticLocation;
37 | 


--------------------------------------------------------------------------------
/modules/locations/TestLocation.js:
--------------------------------------------------------------------------------
 1 | var invariant = require('react/lib/invariant');
 2 | var LocationActions = require('../actions/LocationActions');
 3 | var History = require('../History');
 4 | 
 5 | /**
 6 |  * A location that is convenient for testing and does not require a DOM.
 7 |  */
 8 | class TestLocation {
 9 | 
10 |   constructor(history) {
11 |     this.history = history || [];
12 |     this.listeners = [];
13 |     this._updateHistoryLength();
14 |   }
15 | 
16 |   get needsDOM() {
17 |     return false;
18 |   }
19 | 
20 |   _updateHistoryLength() {
21 |     History.length = this.history.length;
22 |   }
23 | 
24 |   _notifyChange(type) {
25 |     var change = {
26 |       path: this.getCurrentPath(),
27 |       type: type
28 |     };
29 | 
30 |     for (var i = 0, len = this.listeners.length; i < len; ++i)
31 |       this.listeners[i].call(this, change);
32 |   }
33 | 
34 |   addChangeListener(listener) {
35 |     this.listeners.push(listener);
36 |   }
37 | 
38 |   removeChangeListener(listener) {
39 |     this.listeners = this.listeners.filter(function (l) {
40 |       return l !== listener;
41 |     });
42 |   }
43 | 
44 |   push(path) {
45 |     this.history.push(path);
46 |     this._updateHistoryLength();
47 |     this._notifyChange(LocationActions.PUSH);
48 |   }
49 | 
50 |   replace(path) {
51 |     invariant(
52 |       this.history.length,
53 |       'You cannot replace the current path with no history'
54 |     );
55 | 
56 |     this.history[this.history.length - 1] = path;
57 | 
58 |     this._notifyChange(LocationActions.REPLACE);
59 |   }
60 | 
61 |   pop() {
62 |     this.history.pop();
63 |     this._updateHistoryLength();
64 |     this._notifyChange(LocationActions.POP);
65 |   }
66 | 
67 |   getCurrentPath() {
68 |     return this.history[this.history.length - 1];
69 |   }
70 | 
71 |   toString() {
72 |     return '<TestLocation>';
73 |   }
74 | 
75 | }
76 | 
77 | module.exports = TestLocation;
78 | 


--------------------------------------------------------------------------------
/modules/locations/__tests__/HashLocation-test.js:
--------------------------------------------------------------------------------
 1 | var expect = require('expect');
 2 | var HashLocation = require('../HashLocation');
 3 | 
 4 | describe('HashLocation.getCurrentPath', function () {
 5 |   afterEach(function () {
 6 |     window.location.hash = '';
 7 |   });
 8 | 
 9 |   //this test is needed because Firefox will pre-decode the value retrieved from
10 |   //window.location.hash
11 |   it('returns a properly decoded equivalent of window.location.hash', function () {
12 |     window.location.hash = '';
13 |     expect(HashLocation.getCurrentPath()).toBe('');
14 | 
15 |     window.location.hash = 'asdf';
16 |     expect(HashLocation.getCurrentPath()).toBe('asdf');
17 | 
18 |     // + is only special in the query component, not the hash
19 |     window.location.hash = 'test+spaces';
20 |     expect(HashLocation.getCurrentPath()).toBe('test+spaces');
21 | 
22 |     window.location.hash = 'first%2Fsecond';
23 |     expect(HashLocation.getCurrentPath()).toBe('first%2Fsecond');
24 | 
25 |     window.location.hash = 'first/second';
26 |     expect(HashLocation.getCurrentPath()).toBe('first/second');
27 | 
28 |     window.location.hash = 'first%252Fsecond';
29 |     expect(HashLocation.getCurrentPath()).toBe('first%2Fsecond');
30 | 
31 |     // decodeURI doesn't handle lone percents
32 |     window.location.hash = '%';
33 |     expect(function () {
34 |       HashLocation.getCurrentPath();
35 |     }).toThrow(URIError);
36 | 
37 |     window.location.hash = '%25';
38 |     expect(HashLocation.getCurrentPath()).toBe('%');
39 | 
40 |     window.location.hash =
41 |         'complicated+string/full%2Fof%3Fspecial%25chars%2520and%23escapes%E1%88%B4';
42 |     expect(HashLocation.getCurrentPath())
43 |         .toBe('complicated+string/full%2Fof%3Fspecial%chars%20and%23escapesሴ');
44 |   });
45 | });
46 | 


--------------------------------------------------------------------------------
/modules/runRouter.js:
--------------------------------------------------------------------------------
 1 | var createRouter = require('./createRouter');
 2 | 
 3 | /**
 4 |  * A high-level convenience method that creates, configures, and
 5 |  * runs a router in one shot. The method signature is:
 6 |  *
 7 |  *   Router.run(routes[, location ], callback);
 8 |  *
 9 |  * Using `window.location.hash` to manage the URL, you could do:
10 |  *
11 |  *   Router.run(routes, function (Handler) {
12 |  *     React.render(<Handler/>, document.body);
13 |  *   });
14 |  * 
15 |  * Using HTML5 history and a custom "cursor" prop:
16 |  * 
17 |  *   Router.run(routes, Router.HistoryLocation, function (Handler) {
18 |  *     React.render(<Handler cursor={cursor}/>, document.body);
19 |  *   });
20 |  *
21 |  * Returns the newly created router.
22 |  *
23 |  * Note: If you need to specify further options for your router such
24 |  * as error/abort handling or custom scroll behavior, use Router.create
25 |  * instead.
26 |  *
27 |  *   var router = Router.create(options);
28 |  *   router.run(function (Handler) {
29 |  *     // ...
30 |  *   });
31 |  */
32 | function runRouter(routes, location, callback) {
33 |   if (typeof location === 'function') {
34 |     callback = location;
35 |     location = null;
36 |   }
37 | 
38 |   var router = createRouter({
39 |     routes: routes,
40 |     location: location
41 |   });
42 | 
43 |   router.run(callback);
44 | 
45 |   return router;
46 | }
47 | 
48 | module.exports = runRouter;
49 | 


--------------------------------------------------------------------------------
/modules/supportsHistory.js:
--------------------------------------------------------------------------------
 1 | function supportsHistory() {
 2 |   /*! taken from modernizr
 3 |    * https://github.com/Modernizr/Modernizr/blob/master/LICENSE
 4 |    * https://github.com/Modernizr/Modernizr/blob/master/feature-detects/history.js
 5 |    * changed to avoid false negatives for Windows Phones: https://github.com/rackt/react-router/issues/586
 6 |    */
 7 |   var ua = navigator.userAgent;
 8 |   if ((ua.indexOf('Android 2.') !== -1 ||
 9 |       (ua.indexOf('Android 4.0') !== -1)) &&
10 |       ua.indexOf('Mobile Safari') !== -1 &&
11 |       ua.indexOf('Chrome') === -1 &&
12 |       ua.indexOf('Windows Phone') === -1) {
13 |     return false;
14 |   }
15 |   return (window.history && 'pushState' in window.history);
16 | }
17 | 
18 | module.exports = supportsHistory;
19 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-router",
 3 |   "version": "0.13.1",
 4 |   "description": "A complete routing library for React.js",
 5 |   "main": "modules",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "https://github.com/rackt/react-router.git"
 9 |   },
10 |   "homepage": "https://github.com/rackt/react-router/blob/latest/README.md",
11 |   "bugs": "https://github.com/rackt/react-router/issues",
12 |   "scripts": {
13 |     "build-global": "rm -rf build/global && NODE_ENV=production webpack modules/index.js build/global/ReactRouter.js && NODE_ENV=production COMPRESS=1 webpack modules/index.js build/global/ReactRouter.min.js && echo \"gzipped, the global build is `gzip -c build/global/ReactRouter.min.js | wc -c` bytes\"",
14 |     "build-npm": "rm -rf build/npm && babel -d build/npm/lib ./modules && cp README.md build/npm && find -X build/npm/lib -type d -name __tests__ | xargs rm -rf && node -p 'p=require(\"./package\");p.main=\"lib\";p.scripts=p.devDependencies=undefined;JSON.stringify(p,null,2)' > build/npm/package.json",
15 |     "examples": "webpack-dev-server --config examples/webpack.config.js --content-base examples",
16 |     "test": "jsxhint . && karma start --single-run"
17 |   },
18 |   "authors": [
19 |     "Ryan Florence",
20 |     "Michael Jackson"
21 |   ],
22 |   "license": "MIT",
23 |   "devDependencies": {
24 |     "babel": "^4.4.5",
25 |     "babel-core": "^4.4.6",
26 |     "babel-loader": "^4.0.0",
27 |     "bundle-loader": "^0.5.2",
28 |     "events": "1.0.2",
29 |     "expect": "^1.1.0",
30 |     "jsxhint": "^0.12.1",
31 |     "karma": "^0.12.28",
32 |     "karma-chrome-launcher": "^0.1.7",
33 |     "karma-cli": "0.0.4",
34 |     "karma-firefox-launcher": "^0.1.3",
35 |     "karma-mocha": "^0.1.10",
36 |     "karma-sourcemap-loader": "^0.3.2",
37 |     "karma-webpack": "^1.3.1",
38 |     "mocha": "^2.0.1",
39 |     "react": "0.13.x",
40 |     "rf-changelog": "^0.4.0",
41 |     "rx": "2.3.18",
42 |     "webpack": "^1.4.13",
43 |     "webpack-dev-server": "^1.6.6"
44 |   },
45 |   "peerDependencies": {
46 |     "react": "0.13.x"
47 |   },
48 |   "dependencies": {
49 |     "qs": "2.4.1",
50 |     "classnames": "1.1.x",
51 |     "object-assign": "^2.0.0"
52 |   },
53 |   "tags": [
54 |     "react",
55 |     "router"
56 |   ],
57 |   "keywords": [
58 |     "react",
59 |     "react-component",
60 |     "routing",
61 |     "route",
62 |     "routes",
63 |     "router"
64 |   ]
65 | }
66 | 


--------------------------------------------------------------------------------
/scripts/preview-release.sh:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 | node_modules/.bin/changelog -t preview -s
3 | 


--------------------------------------------------------------------------------
/scripts/release.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash -e
 2 | 
 3 | update_version() {
 4 |   echo "$(node -p "p=require('./${1}');p.version='${2}';JSON.stringify(p,null,2)")" > $1
 5 |   echo "Updated ${1} version to ${2}"
 6 | }
 7 | 
 8 | current_version=$(node -p "require('./package').version")
 9 | 
10 | printf "Next version (current is $current_version)? "
11 | read next_version
12 | 
13 | if ! [[ $next_version =~ ^[0-9]\.[0-9]+\.[0-9](-.+)? ]]; then
14 |   echo "Version must be a valid semver string, e.g. 1.0.2 or 2.3.0-beta.1"
15 |   exit 1
16 | fi
17 | 
18 | next_ref="v$next_version"
19 | 
20 | npm test -- --single-run
21 | 
22 | update_version 'package.json' $next_version
23 | update_version 'bower.json' $next_version
24 | 
25 | node_modules/.bin/changelog -t $next_ref
26 | 
27 | npm run build-global
28 | git add -A build/global
29 | 
30 | npm run build-npm
31 | git add -A build/npm
32 | 
33 | git commit -am "Version $next_version"
34 | 
35 | git tag $next_ref
36 | git tag latest -f
37 | 
38 | git push origin master
39 | git push origin $next_ref
40 | git push origin latest -f
41 | 
42 | npm publish build/npm
43 | 


--------------------------------------------------------------------------------
/tests.webpack.js:
--------------------------------------------------------------------------------
1 | var context = require.context('./modules', true, /-test\.js$/);
2 | context.keys().forEach(context);
3 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var webpack = require('webpack');
 2 | 
 3 | var plugins = [
 4 |   new webpack.DefinePlugin({
 5 |     'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
 6 |   })
 7 | ];
 8 | 
 9 | if (process.env.COMPRESS) {
10 |   plugins.push(
11 |     new webpack.optimize.UglifyJsPlugin({
12 |       compressor: {
13 |         warnings: false
14 |       }
15 |     })
16 |   );
17 | }
18 | 
19 | module.exports = {
20 | 
21 |   output: {
22 |     library: 'ReactRouter',
23 |     libraryTarget: 'umd'
24 |   },
25 | 
26 |   externals: [
27 |     {
28 |       "react": {
29 |         root: "React",
30 |         commonjs2: "react",
31 |         commonjs: "react",
32 |         amd: "react"
33 |       }
34 |     }
35 |   ],
36 | 
37 |   module: {
38 |     loaders: [
39 |       { test: /\.js$/, loader: 'babel-loader' }
40 |     ]
41 |   },
42 | 
43 |   node: {
44 |     Buffer: false
45 |   },
46 | 
47 |   plugins: plugins
48 | 
49 | };
50 | 


--------------------------------------------------------------------------------