Require <Router history>

dongpei021 · Jun 10, 2015 · 0ab1478 · 0ab1478
1 parent d9618bb
commit 0ab1478
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 59 deletions.
diff --git a/modules/Router.js b/modules/Router.js
@@ -59,32 +59,22 @@ var ContextMixin = {
     var path = this.makePath(pathname, query);
     var { history } = this.props;
 
-    if (history) {
-      if (this.nextLocation) {
-        history.replaceState(state, path);
-      } else {
-        history.pushState(state, path);
-      }
+    if (this.nextLocation) {
+      history.replaceState(state, path);
     } else {
-      this._updateState(new Location(path, state));
+      history.pushState(state, path);
     }
   },
 
   replaceWith(pathname, query, state=null) {
     var path = this.makePath(pathname, query);
     var { history } = this.props;
 
-    if (history) {
-      history.replaceState(state, path);
-    } else {
-      this._updateState(new Location(path, state));
-    }
+    history.replaceState(state, path);
   },
 
   go(n) {
-    var { history } = this.props;
-    invariant(history, 'Router#go needs a history');
-    history.go(n);
+    this.props.history.go(n);
   },
 
   goBack() {
@@ -115,15 +105,15 @@ export var Router = React.createClass({
   },
 
   propTypes: {
-    history,
+    history: history.isRequired,
     children: routes.isRequired,
     createElement: func.isRequired,
     parseQueryString: func.isRequired,
     stringifyQuery: func.isRequired,
     onError: func.isRequired,
     onUpdate: func,
 
-    // Primarily for server-side rendering.
+    // For server-side rendering...
     location: any,
     branch: routes,
     params: object,
@@ -133,7 +123,6 @@ export var Router = React.createClass({
 
   getDefaultProps() {
     return {
-      location: '/',
       createElement,
       parseQueryString,
       stringifyQuery,
@@ -262,32 +251,27 @@ export var Router = React.createClass({
   },
 
   componentWillMount() {
-    var { children, history, location } = this.props;
+    var { children, history } = this.props;
 
-    this.transitionHooks = [];
     this.routes = createRoutes(children);
+    this.transitionHooks = [];
     this.nextLocation = null;
 
-    if (history) {
-      if (typeof history.setup === 'function')
-        history.setup();
+    if (typeof history.setup === 'function')
+      history.setup();
 
-      this._updateState(history.location);
-    } else {
-      this._updateState(location);
-    }
+    // We need to listen first in case we redirect immediately.
+    if (history.addChangeListener)
+      history.addChangeListener(this.handleHistoryChange);
+
+    this._updateState(history.location);
   },
 
   handleHistoryChange() {
     this._updateState(this.props.history.location);
   },
 
   componentDidMount() {
-    var { history } = this.props;
-
-    if (history)
-      history.addChangeListener(this.handleHistoryChange);
-
     // React doesn't fire the setState callback when we call setState
     // synchronously within componentWillMount, so we need this. Note
     // that we still only get one call to onUpdate, even if setState
@@ -307,16 +291,15 @@ export var Router = React.createClass({
 
       // Call this here because _updateState
       // uses this.routes to determine state.
-      this._updateState(nextProps.location);
-    } else if (this.props.location !== nextProps.location) {
-      this._updateState(nextProps.location);
+      if (nextProps.history.location)
+        this._updateState(nextProps.history.location);
     }
   },
 
   componentWillUnmount() {
     var { history } = this.props;
 
-    if (history)
+    if (history.removeChangeListener)
       history.removeChangeListener(this.handleHistoryChange);
   },
 

diff --git a/modules/__tests__/Link-test.js b/modules/__tests__/Link-test.js
@@ -8,6 +8,10 @@ import Link from '../Link';
 
 var { click } = React.addons.TestUtils.Simulate;
 
+function createHistory(path) {
+  return new MemoryHistory(path);
+}
+
 describe('A <Link>', function () {
 
   var Parent = React.createClass({
@@ -89,7 +93,7 @@ describe('A <Link>', function () {
 
     it('knows how to make its href', function () {
       render((
-        <Router location="/link">
+        <Router history={createHistory("/link")}>
           <Route path="hello/:name" component={Hello}/>
           <Route path="link" component={LinkWrapper}/>
         </Router>
@@ -134,10 +138,8 @@ describe('A <Link>', function () {
         }
       }
 
-      var history = new MemoryHistory('/goodbye');
-
       render((
-        <Router history={history} onUpdate={execNextStep}>
+        <Router history={createHistory('/goodbye')} onUpdate={execNextStep}>
           <Route path="/" component={LinkWrapper}>
             <Route path="goodbye" component={Goodbye}/>
             <Route path="hello" component={Hello}/>
@@ -180,7 +182,7 @@ describe('A <Link>', function () {
       }
 
       render((
-        <Router location="/goodbye" onUpdate={execNextStep}>
+        <Router history={createHistory("/goodbye")} onUpdate={execNextStep}>
           <Route path="/" component={LinkWrapper}>
             <Route path="hello" component={Hello}/>
             <Route path="goodbye" component={Goodbye}/>
@@ -204,7 +206,7 @@ describe('A <Link>', function () {
       });
 
       render((
-        <Router location="/link">
+        <Router history={createHistory("/link")}>
           <Route path="hello" component={Hello}/>
           <Route path="link" component={LinkWrapper}/>
         </Router>
@@ -239,7 +241,7 @@ describe('A <Link>', function () {
       }
 
       render((
-        <Router location="/link" onUpdate={execNextStep}>
+        <Router history={createHistory("/link")} onUpdate={execNextStep}>
           <Route path="hello" component={Hello}/>
           <Route path="link" component={LinkWrapper}/>
         </Router>

diff --git a/modules/__tests__/Router-test.js b/modules/__tests__/Router-test.js
@@ -1,11 +1,19 @@
 import expect from 'expect';
 import React, { render } from 'react';
+import MemoryHistory from '../MemoryHistory';
 import Location from '../Location';
 import Router from '../Router';
 import Route from '../Route';
 
+function createHistory(path) {
+  return new MemoryHistory(path);
+}
+
 describe('Router', function () {
-  var div = document.createElement('div');
+  var div;
+  beforeEach(function () {
+    div = document.createElement('div');
+  });
 
   afterEach(function () {
     React.unmountComponentAtNode(div);
@@ -19,7 +27,7 @@ describe('Router', function () {
     });
 
     render((
-      <Router>
+      <Router history={createHistory()}>
         <Route path="/" component={Component}/>
       </Router>
     ), div, function () {
@@ -42,7 +50,7 @@ describe('Router', function () {
     });
 
     render((
-      <Router>
+      <Router history={createHistory()}>
         <Route component={Parent}>
           <Route component={Parent}>
             <Route path="/" component={Child}/>
@@ -70,7 +78,7 @@ describe('Router', function () {
     });
 
     render((
-      <Router createElement={Component => <Wrapper Component={Component}/>}>
+      <Router history={createHistory()} createElement={Component => <Wrapper Component={Component}/>}>
         <Route path="/" component={Component}/>
       </Router>
     ), div, function () {
@@ -104,7 +112,7 @@ describe('Router', function () {
     var routes = [ parentRoute ];
 
     it('matches the correct components', function (done) {
-      render(<Router location="/two/sally" children={routes}/>, div, function () {
+      render(<Router history={createHistory("/two/sally")} children={routes}/>, div, function () {
         expect(this.state.components).toEqual([
           parentRoute.component,
           childRoutes[0].component
@@ -115,7 +123,7 @@ describe('Router', function () {
     });
 
     it('matches named components', function (done) {
-      render(<Router location="/three" children={routes}/>, div, function () {
+      render(<Router history={createHistory("/three")} children={routes}/>, div, function () {
         expect(this.state.components).toEqual([
           Component1,
           { main: Component3, sidebar: Component4 }
@@ -126,7 +134,7 @@ describe('Router', function () {
     });
 
     it('matches the correct route branch', function (done) {
-      render(<Router location="/three" children={routes}/>, div, function () {
+      render(<Router history={createHistory("/three")} children={routes}/>, div, function () {
         expect(this.state.branch).toEqual([
           parentRoute,
           childRoutes[1]
@@ -137,7 +145,7 @@ describe('Router', function () {
     });
 
     it('matches the correct params', function (done) {
-      render(<Router location="/two/sally" children={routes}/>, div, function () {
+      render(<Router history={createHistory("/two/sally")} children={routes}/>, div, function () {
         expect(this.state.params).toEqual({ name: 'sally' });
         done();
       });
@@ -176,14 +184,14 @@ describe('Router', function () {
     };
 
     it('matches the correct components', function (done) {
-      render(<Router location="/two/sally" children={routes}/>, div, function () {
+      render(<Router history={createHistory("/two/sally")} children={routes}/>, div, function () {
         expect(this.state.components).toEqual([ Component1, Component2 ]);
         done();
       });
     });
 
     it('matches named components', function (done) {
-      render(<Router location="/three" children={routes}/>, div, function () {
+      render(<Router history={createHistory("/three")} children={routes}/>, div, function () {
         expect(this.state.components).toEqual([
           Component1,
           { main: Component3, sidebar: Component4 }
@@ -193,7 +201,7 @@ describe('Router', function () {
     });
 
     it('matches the correct route branch', function (done) {
-      render(<Router location="/three" children={routes}/>, div, function () {
+      render(<Router history={createHistory("/three")} children={routes}/>, div, function () {
         expect(this.state.branch).toEqual([
           parentRoute,
           childRoutes[1]
@@ -204,7 +212,7 @@ describe('Router', function () {
     });
 
     it('matches the correct params', function (done) {
-      render(<Router location="/two/sally" children={routes}/>, div, function () {
+      render(<Router history={createHistory("/two/sally")} children={routes}/>, div, function () {
         expect(this.state.params).toEqual({ name: 'sally' });
         done();
       });

diff --git a/modules/__tests__/transitionHooks-test.js b/modules/__tests__/transitionHooks-test.js
@@ -4,6 +4,10 @@ import MemoryHistory from '../MemoryHistory';
 import Router from '../Router';
 import Route from '../Route';
 
+function createHistory(path) {
+  return new MemoryHistory(path);
+}
+
 describe('When a router enters a branch', function () {
   var div, Dashboard, NewsFeed, Inbox, DashboardRoute, NewsFeedRoute, InboxRoute, RedirectToInboxRoute, MessageRoute, routes;
   beforeEach(function () {
@@ -109,7 +113,7 @@ describe('When a router enters a branch', function () {
       spyOn(NewsFeedRoute, 'onEnter').andCallThrough()
     ];
 
-    render(<Router location="/news" children={routes}/>, div, function () {
+    render(<Router history={createHistory('/news')} children={routes}/>, div, function () {
       spies.forEach(function (spy) {
         expect(spy).toHaveBeenCalled();
       });
@@ -123,7 +127,7 @@ describe('When a router enters a branch', function () {
       var redirectRouteLeaveSpy = spyOn(RedirectToInboxRoute, 'onLeave').andCallThrough();
       var inboxEnterSpy = spyOn(InboxRoute, 'onEnter').andCallThrough();
 
-      render(<Router location="/redirect-to-inbox" children={routes}/>, div, function () {
+      render(<Router history={createHistory('/redirect-to-inbox')} children={routes}/>, div, function () {
         expect(this.state.location.path).toEqual('/inbox');
         expect(redirectRouteEnterSpy).toHaveBeenCalled();
         expect(redirectRouteLeaveSpy.calls.length).toEqual(0);
@@ -160,8 +164,7 @@ describe('When a router enters a branch', function () {
         }
       }
 
-      var history = new MemoryHistory('/inbox');
-      render(<Router history={history} children={routes} onUpdate={execNextStep}/>, div, execNextStep);
+      render(<Router history={createHistory('/inbox')} children={routes} onUpdate={execNextStep}/>, div, execNextStep);
     });
   });