History singletons

README.md

@@ -66,7 +66,7 @@ What's it look like?
 
 ```js
 import { Router, Route } from 'react-router';
-import BrowserHistory from 'react-router/lib/BrowserHistory';
+import { history } from 'react-router/lib/BrowserHistory';
 
 var App = React.createClass({/*...*/});
 var About = React.createClass({/*...*/});
@@ -115,7 +115,7 @@ var User = React.createClass({
 // instead, all you really need is a single root route, you don't need to
 // colocate the entire config).
 React.render((
-  <Router history={new BrowserHistory}>
+  <Router history={history}>
     <Route path="/" component={App}>
       <Route path="about" component={About}/>
       <Route path="users" component={Users} indexComponent={RecentUsers}>

doc/00 Guides/0 Overview.md

@@ -111,7 +111,7 @@ Let's refactor our app to use React Router.
 // first we import some components
 import { Router, Route, Link } from 'react-router';
 // the histories are imported separately for smaller builds
-import HashHistory from 'react-router/lib/HashHistory';
+import { history } from 'react-router/lib/HashHistory';
 
 // ...
 
@@ -141,7 +141,7 @@ var App = React.createClass({
 // Finally we render a `Router` component with some `Route`s, it'll do all
 // the fancy routing stuff for us.
 React.render((
-  <Router history={new HashHistory}>
+  <Router history={history}>
     <Route path="/" component={App}>
       <Route path="about" component={About}/>
       <Route path="inbox" component={Inbox}/>
@@ -162,7 +162,7 @@ var routes = {
   ]
 };
 
-React.render(<Router history={new HashHistory} children={routes}/>, document.body);
+React.render(<Router history={history} children={routes}/>, document.body);
 ```
 
 Adding more UI
@@ -191,7 +191,7 @@ var Inbox = React.createClass({
 });
 
 React.render((
-  <Router history={new HashHistory}>
+  <Router history={history}>
     <Route component={App}>
       <Route path="about" component={About}/>
       <Route path="inbox" component={Inbox}>
@@ -230,4 +230,3 @@ var Message = React.createClass({
 That's the gist of React Router. Application UIs are boxes inside of
 boxes inside of boxes; now you can keep those boxes in sync with the
 URL.
-

doc/03 History/0 Histories.md

@@ -3,8 +3,8 @@
 an instance of one with your own options for query parsing.
 
 ```js
-import History from 'react-router/lib/BrowserHistory';
-<Router history={History}/>
+import { history } from 'react-router/lib/BrowserHistory';
+<Router history={history}/>
 ```
 
 If you need to do your own query parsing:

doc/03 History/BrowserHistory.md

@@ -43,14 +43,13 @@ Example
 
 ```js
 import { Router } from 'react-router';
-import BrowserHistory from 'react-router/lib/BrowserHistory';
+import { history } from 'react-router/lib/BrowserHistory';
 
 React.render((
-  <Router history={new BrowserHistory}>
+  <Router history={ history }>
     {/* ... */}
   </Router>
 ), document.body);
 ```
 
   [Histories]:#TODO
-

doc/03 History/HashHistory.md

@@ -33,10 +33,10 @@ Normal usage
 
 ```js
 import { Router } from 'react-router';
-import HashHistory from 'react-router/lib/HashHistory';
+import { history } from 'react-router/lib/HashHistory';
 
 React.render((
-  <Router history={new HashHistory}>
+  <Router history={history}>
     {/* ... */}
   </Router>
 ), document.body);
@@ -61,4 +61,3 @@ React.render((
 ```
 
   [Histories]:#TODO
-

examples/animations/app.js

@@ -1,5 +1,5 @@
 import React, { cloneElement } from 'react/addons';
-import HashHistory from 'react-router/lib/HashHistory';
+import { history } from 'react-router/lib/HashHistory';
 import { Router, Route, Link } from 'react-router';
 
 var { CSSTransitionGroup } = React.addons;
@@ -46,7 +46,7 @@ var Page2 = React.createClass({
 
 
 React.render((
-  <Router history={new HashHistory}>
+  <Router history={history}>
     <Route path="/" component={App}>
       <Route path="page1" component={Page1} />
       <Route path="page2" component={Page2} />

examples/async-data/app.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import HashHistory from 'react-router/lib/HashHistory';
+import { history } from 'react-router/lib/HashHistory';
 import { Router, Route, Link, Navigation } from 'react-router';
 import { loadContacts, loadContact, createContact } from './utils';
 import AsyncProps from 'react-router/lib/experimental/AsyncProps';
@@ -106,7 +106,7 @@ var Index = React.createClass({
 });
 
 React.render((
-  <Router history={new HashHistory} createElement={AsyncProps.createElement}>
+  <Router history={history} createElement={AsyncProps.createElement}>
     <Route component={AsyncProps} renderInitialLoad={() => <Spinner/> }>
       <Route component={App}>
         <Route path="/" component={Index}/>

examples/auth-flow/app.js

@@ -2,6 +2,7 @@ import React, { findDOMNode } from 'react';
 import { Router, Route, Link, Navigation } from 'react-router';
 import HashHistory from 'react-router/lib/HashHistory';
 import auth from './auth';
+var history = new HashHistory({ queryKey: true });
 
 var App = React.createClass({
   getInitialState() {
@@ -120,7 +121,7 @@ function requireAuth(nextState, transition) {
 }
 
 React.render((
-  <Router history={new HashHistory({ queryKey: true })}>
+  <Router history={history}>
     <Route path="/" component={App}>
       <Route path="login" component={Login}/>
       <Route path="logout" component={Logout}/>

examples/dynamic-segments/app.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import HashHistory from 'react-router/lib/HashHistory';
+import { history } from 'react-router/lib/HashHistory';
 import { Router, Route, Link, Redirect } from 'react-router';
 
 var App = React.createClass({
@@ -47,7 +47,7 @@ var Task = React.createClass({
 });
 
 React.render((
-  <Router history={new HashHistory}>
+  <Router history={history}>
     <Route path="/" component={App}>
       <Route path="user/:userID" component={User}>
         <Route path="tasks/:taskID" component={Task}/>

examples/huge-apps/app.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import HashHistory from 'react-router/lib/HashHistory';
+import { history } from 'react-router/lib/HashHistory';
 import { Router } from 'react-router';
 import AsyncProps from 'react-router/lib/experimental/AsyncProps';
 import stubbedCourses from './stubs/COURSES';
@@ -28,7 +28,7 @@ var rootRoute = {
 React.render((
   <Router
     routes={rootRoute}
-    history={new HashHistory}
+    history={history}
     createElement={AsyncProps.createElement}
   />
 ), document.getElementById('example'));

examples/master-detail/app.js

@@ -1,5 +1,5 @@
 import React, { findDOMNode } from 'react';
-import HashHistory from 'react-router/lib/HashHistory';
+import { history } from 'react-router/lib/HashHistory';
 import { Router, Navigation, Route, Link } from 'react-router';
 import ContactStore from './ContactStore';
 
@@ -150,7 +150,7 @@ var NotFound = React.createClass({
 });
 
 React.render((
-  <Router history={new HashHistory}>
+  <Router history={history}>
     <Route component={App}>
       <Route path="/" component={Index}/>
       <Route path="contact/new" component={NewContact}/>

examples/passing-props-to-children/app.js

@@ -1,5 +1,5 @@
 var React = require('react');
-import HashHistory from 'react-router/lib/HashHistory';
+import { history } from 'react-router/lib/HashHistory';
 var { Router, Route, Link, Navigation } = require('react-router');
 
 var App = React.createClass({
@@ -72,7 +72,7 @@ var Taco = React.createClass({
 });
 
 React.render((
-  <Router history={new HashHistory}>
+  <Router history={history}>
     <Route path="/" component={App}>
       <Route path="taco/:name" component={Taco}/>
     </Route>

examples/pinterest/app.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Router, Link } from 'react-router';
 import HashHistory from 'react-router/lib/HashHistory';
+var history = new HashHistory({ queryKey: 'k' });
 
 var pictures = [
   {id: 0, src: 'http://placekitten.com/601/601'},
@@ -127,7 +128,7 @@ var RootRoute = {
 };
 
 React.render(
-  <Router history={new HashHistory({ queryKey: 'k' })} children={RootRoute}/>,
+  <Router history={history} children={RootRoute}/>,
   document.getElementById('example')
 );
 
@@ -160,4 +161,3 @@ React.render(
 //
 // 10. I am very glad there aren't ten steps to explain this ...
 //
-

examples/query-params/app.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import HashHistory from 'react-router/lib/HashHistory';
+import { history } from 'react-router/lib/HashHistory';
 import { Router, Route, Link } from 'react-router';
 
 var User = React.createClass({
@@ -32,7 +32,7 @@ var App = React.createClass({
 });
 
 React.render((
-  <Router history={new HashHistory}>
+  <Router history={history}>
     <Route path="/" component={App}>
       <Route path="user/:userID" component={User}/>
     </Route>

examples/shared-root/app.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import HashHistory from 'react-router/lib/HashHistory';
+import { history } from 'react-router/lib/HashHistory';
 import { Router, Route, Link } from 'react-router';
 
 var App = React.createClass({
@@ -70,7 +70,7 @@ var ForgotPassword = React.createClass({
 });
 
 React.render((
-  <Router history={new HashHistory}>
+  <Router history={history}>
     <Route path="/" component={App}>
       <Route component={SignedOut}>
         <Route path="signin" component={SignIn}/>

examples/sidebar/app.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import HashHistory from 'react-router/lib/HashHistory';
+import { history } from 'react-router/lib/HashHistory';
 import { Router, Route, Link } from 'react-router';
 import data from './data';
 
@@ -93,7 +93,7 @@ var App = React.createClass({
 });
 
 React.render((
-  <Router history={new HashHistory}>
+  <Router history={history}>
     <Route path="/" component={App}>
       <Route path="category/:category" components={{content: Category, sidebar: CategorySidebar}}>
         <Route path=":item" component={Item}/>

examples/transitions/app.js

@@ -1,6 +1,6 @@
 import React, { findDOMNode } from 'react';
 import { Router, Route, Link, Navigation, TransitionHook } from 'react-router';
-import HashHistory from 'react-router/lib/HashHistory';
+import { history } from 'react-router/lib/HashHistory';
 
 var App = React.createClass({
   render() {
@@ -57,7 +57,7 @@ var Form = React.createClass({
 });
 
 React.render((
-  <Router history={new HashHistory}>
+  <Router history={history}>
     <Route path="/" component={App}>
       <Route path="dashboard" component={Dashboard}/>
       <Route path="form" component={Form}/>

modules/BrowserHistory.js

@@ -105,7 +105,7 @@ class BrowserHistory extends DOMHistory {
       window.location.replace(path);
     }
   }
-
 }
 
+export var history = new BrowserHistory;
 export default BrowserHistory;

modules/DOMHistory.js

@@ -5,7 +5,6 @@ import { getWindowScrollPosition } from './DOMUtils';
  * A history interface that assumes a DOM environment.
  */
 class DOMHistory extends History {
-
   constructor(options={}) {
     super(options);
     this.getScrollPosition = options.getScrollPosition || getWindowScrollPosition;

modules/HashHistory.js

@@ -34,7 +34,7 @@ function saveState(path, queryKey, state) {
 function readState(path, queryKey) {
   var sessionKey = getQueryStringValueFromPath(path, queryKey);
   var json = sessionKey && window.sessionStorage.getItem(sessionKey);
-  
+
   if (json) {
     try {
       return JSON.parse(json);
@@ -167,7 +167,7 @@ class HashHistory extends DOMHistory {
   makeHref(path) {
     return '#' + path;
   }
-
 }
 
+export var history = new HashHistory;
 export default HashHistory;

modules/__tests__/BrowserHistory-test.js

@@ -1,6 +1,7 @@
 import describeHistory from './describeHistory';
-import BrowserHistory from '../BrowserHistory';
+import BrowserHistory, { history } from '../BrowserHistory';
 
 describe('BrowserHistory', function () {
   describeHistory(new BrowserHistory);
+  describeHistory(history);
 });

modules/__tests__/HashHistory-test.js

@@ -1,6 +1,7 @@
 import describeHistory from './describeHistory';
-import HashHistory from '../HashHistory';
+import HashHistory, { history } from '../HashHistory';
 
 describe('HashHistory', function () {
   describeHistory(new HashHistory);
+  describeHistory(history);
 });

modules/__tests__/MemoryHistory-test.js

@@ -40,7 +40,7 @@ describe('MemoryHistory', function () {
     it('cannot go forward', function () {
       expect(history.canGoForward()).toBe(false);
     });
- 
+
     describe('and then replacing that path', function () {
       beforeEach(function () {
         history.replaceState(null, '/replace');