Put history on context instead of router

Author: mjackson

modules/Lifecycle.js

@@ -26,7 +26,7 @@ var Lifecycle = {
   },
 
   contextTypes: {
-    router: object.isRequired,
+    history: object.isRequired,
     // Nested children receive the route as context, either
     // set by the route component using the RouteContext mixin
     // or by some other ancestor.
@@ -51,14 +51,14 @@ var Lifecycle = {
       'The Lifecycle mixin requires you to define a routerWillLeave method'
     );
 
-    this.context.router.registerRouteHook(
+    this.context.history.registerRouteHook(
       this._getRoute(),
       this.routerWillLeave
     );
   },
 
   componentWillUnmount() {
-    this.context.router.unregisterRouteHook(
+    this.context.history.unregisterRouteHook(
       this._getRoute(),
       this.routerWillLeave
     );

modules/Link.js

@@ -32,7 +32,7 @@ function isModifiedEvent(event) {
 var Link = React.createClass({
 
   contextTypes: {
-    router: object
+    history: object
   },
 
   propTypes: {
@@ -68,13 +68,13 @@ var Link = React.createClass({
     event.preventDefault();
 
     if (allowTransition)
-      this.context.router.pushState(this.props.state, this.props.to, this.props.query);
+      this.context.history.pushState(this.props.state, this.props.to, this.props.query);
   },
 
   componentWillMount() {
     warning(
-      this.context.router,
-      'A <Link> should not be rendered outside the context of a router; ' +
+      this.context.history,
+      'A <Link> should not be rendered outside the context of history; ' +
       'some features including real hrefs, active styling, and navigation ' +
       'will not function correctly'
     );
@@ -88,14 +88,14 @@ var Link = React.createClass({
       onClick: this.handleClick
     };
 
-    var { router } = this.context;
+    var { history } = this.context;
 
     // Ignore if rendered outside the context
-    // of a router, simplifies unit testing.
-    if (router) {
-      props.href = router.createHref(to, query);
+    // of history, simplifies unit testing.
+    if (history) {
+      props.href = history.createHref(to, query);
 
-      if (router.isActive(to, query)) {
+      if (history.isActive(to, query)) {
         if (props.activeClassName)
           props.className += props.className !== '' ? ` ${props.activeClassName}` : props.activeClassName;
 

modules/Navigation.js

@@ -26,15 +26,15 @@ var { object } = React.PropTypes;
 var Navigation = {
 
   contextTypes: {
-    router: object.isRequired
+    history: object.isRequired
   },
 
   transitionTo(pathname, query, state) {
-    return this.context.router.pushState(state, pathname, query);
+    return this.context.history.pushState(state, pathname, query);
   },
 
   replaceWith(pathname, query, state) {
-    return this.context.router.replaceState(state, pathname, query);
+    return this.context.history.replaceState(state, pathname, query);
   }
 
 };
@@ -49,8 +49,8 @@ var RouterNavigationMethods = [
 
 RouterNavigationMethods.forEach(function (method) {
   Navigation[method] = function () {
-    var router = this.context.router;
-    return router[method].apply(router, arguments);
+    var { history } = this.context;
+    return history[method].apply(history, arguments);
   };
 });
 

modules/Router.js

@@ -5,7 +5,7 @@ import RoutingContext from './RoutingContext';
 import useRoutes from './useRoutes';
 import { routes } from './PropTypes';
 
-var { func } = React.PropTypes;
+var { func, object } = React.PropTypes;
 
 /**
  * A <Router> is a high-level API for automatically setting up
@@ -15,22 +15,16 @@ var { func } = React.PropTypes;
 var Router = React.createClass({
 
   propTypes: {
+    history: object,
     children: routes,
     routes, // alias for children
-    createHistory: func.isRequired,
     createElement: func,
     onError: func,
     onUpdate: func,
     parseQueryString: func,
     stringifyQuery: func
   },
 
-  getDefaultProps() {
-    return {
-      createHistory: createHashHistory
-    };
-  },
-
   getInitialState() {
     return {
       location: null,
@@ -50,15 +44,16 @@ var Router = React.createClass({
   },
 
   componentWillMount() {
-    var { children, routes, parseQueryString, stringifyQuery } = this.props;
+    var { history, children, routes, parseQueryString, stringifyQuery } = this.props;
+    var createHistory = history ? () => history : createHashHistory;
 
-    this.router = useRoutes(this.props.createHistory)({
+    this.history = useRoutes(createHistory)({
       routes: createRoutes(routes || children),
       parseQueryString,
       stringifyQuery
     });
 
-    this._unlisten = this.router.listen((error, state) => {
+    this._unlisten = this.history.listen((error, state) => {
       if (error) {
         this.handleError(error);
       } else {
@@ -75,7 +70,7 @@ var Router = React.createClass({
   render() {
     return React.createElement(RoutingContext, {
       ...this.state,
-      router: this.router,
+      history: this.history,
       createElement: this.props.createElement
     });
   }

modules/RoutingContext.js

@@ -11,7 +11,7 @@ var { array, func, object } = React.PropTypes;
 var RoutingContext = React.createClass({
 
   propTypes: {
-    router: object.isRequired,
+    history: object.isRequired,
     createElement: func.isRequired,
     location: object.isRequired,
     routes: array.isRequired,
@@ -26,13 +26,13 @@ var RoutingContext = React.createClass({
   },
 
   childContextTypes: {
-    router: object.isRequired,
+    history: object.isRequired,
     location: object.isRequired
   },
 
   getChildContext() {
     return {
-      router: this.props.router,
+      history: this.props.history,
       location: this.props.location
     };
   },
@@ -42,7 +42,7 @@ var RoutingContext = React.createClass({
   },
 
   render() {
-    var { router, location, routes, params, components } = this.props;
+    var { history, location, routes, params, components } = this.props;
     var element = null;
 
     if (components) {
@@ -53,7 +53,7 @@ var RoutingContext = React.createClass({
         var route = routes[index];
         var routeParams = getRouteParams(route, params);
         var props = {
-          router,
+          history,
           location,
           params,
           route,

modules/State.js

@@ -25,11 +25,11 @@ var { object } = React.PropTypes;
 var State = {
 
   contextTypes: {
-    router: object.isRequired
+    history: object.isRequired
   },
 
   isActive(pathname, query) {
-    return this.context.router.isActive(pathname, query);
+    return this.context.history.isActive(pathname, query);
   }
 
 };

modules/TransitionUtils.js

@@ -61,5 +61,5 @@ export function runEnterHooks(routes, nextState, callback) {
 export function runLeaveHooks(routes) {
   for (var i = 0, len = routes.length; i < len; ++i)
     if (routes[i].onLeave)
-      routes[i].onLeave.call(route);
+      routes[i].onLeave.call(routes[i]);
 }

modules/useRoutes.js

@@ -16,8 +16,9 @@ import matchRoutes from './matchRoutes';
  */
 function useRoutes(createHistory) {
   return function (options={}) {
-    var history = useQueries(createHistory)(options);
-    var { routes, initialState: state } = options;
+    var { routes, ...historyOptions } = options;
+    var history = useQueries(createHistory)(historyOptions);
+    var state;
 
     function isActive(pathname, query) {
       return _isActive(pathname, query, state.location, state.routes, state.params);