diff --git a/README.md b/README.md index 0ed5038cf3..77501acb88 100644 --- a/README.md +++ b/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(( - + diff --git a/doc/00 Guides/0 Overview.md b/doc/00 Guides/0 Overview.md index 6328d4dab2..186f7e3ddf 100644 --- a/doc/00 Guides/0 Overview.md +++ b/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(( - + @@ -162,7 +162,7 @@ var routes = { ] }; -React.render(, document.body); +React.render(, document.body); ``` Adding more UI @@ -191,7 +191,7 @@ var Inbox = React.createClass({ }); React.render(( - + @@ -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. - diff --git a/doc/03 History/0 Histories.md b/doc/03 History/0 Histories.md index 964b5e8ba4..45e28988ec 100644 --- a/doc/03 History/0 Histories.md +++ b/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'; - +import { history } from 'react-router/lib/BrowserHistory'; + ``` If you need to do your own query parsing: diff --git a/doc/03 History/BrowserHistory.md b/doc/03 History/BrowserHistory.md index ab2a4673f5..917f0f2645 100644 --- a/doc/03 History/BrowserHistory.md +++ b/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(( - + {/* ... */} ), document.body); ``` [Histories]:#TODO - diff --git a/doc/03 History/HashHistory.md b/doc/03 History/HashHistory.md index e48371935c..f96327e677 100644 --- a/doc/03 History/HashHistory.md +++ b/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(( - + {/* ... */} ), document.body); @@ -61,4 +61,3 @@ React.render(( ``` [Histories]:#TODO - diff --git a/examples/animations/app.js b/examples/animations/app.js index 456a23f09b..8d6e6c489a 100644 --- a/examples/animations/app.js +++ b/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(( - + diff --git a/examples/async-data/app.js b/examples/async-data/app.js index 5a0d88f7b0..4f761cb001 100644 --- a/examples/async-data/app.js +++ b/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(( - + }> diff --git a/examples/auth-flow/app.js b/examples/auth-flow/app.js index 169e4ad217..4635cc57eb 100644 --- a/examples/auth-flow/app.js +++ b/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(( - + diff --git a/examples/dynamic-segments/app.js b/examples/dynamic-segments/app.js index 84ed46d7cb..a46c96bff0 100644 --- a/examples/dynamic-segments/app.js +++ b/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(( - + diff --git a/examples/huge-apps/app.js b/examples/huge-apps/app.js index 7b9b0cbfc7..aa661afff6 100644 --- a/examples/huge-apps/app.js +++ b/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(( ), document.getElementById('example')); diff --git a/examples/master-detail/app.js b/examples/master-detail/app.js index 5d0e022017..c10ae234f8 100644 --- a/examples/master-detail/app.js +++ b/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(( - + diff --git a/examples/passing-props-to-children/app.js b/examples/passing-props-to-children/app.js index cfb99d47f2..85f06db86a 100644 --- a/examples/passing-props-to-children/app.js +++ b/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(( - + diff --git a/examples/pinterest/app.js b/examples/pinterest/app.js index 81f4480b8e..b712540c57 100644 --- a/examples/pinterest/app.js +++ b/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( - , + , document.getElementById('example') ); @@ -160,4 +161,3 @@ React.render( // // 10. I am very glad there aren't ten steps to explain this ... // - diff --git a/examples/query-params/app.js b/examples/query-params/app.js index 12679af067..9491b01286 100644 --- a/examples/query-params/app.js +++ b/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(( - + diff --git a/examples/shared-root/app.js b/examples/shared-root/app.js index 0882f64766..85f03b3203 100644 --- a/examples/shared-root/app.js +++ b/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(( - + diff --git a/examples/sidebar/app.js b/examples/sidebar/app.js index a6b7939fdd..3080277f60 100644 --- a/examples/sidebar/app.js +++ b/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(( - + diff --git a/examples/transitions/app.js b/examples/transitions/app.js index 7a50ae4cc1..8fca7f7e51 100644 --- a/examples/transitions/app.js +++ b/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(( - + diff --git a/modules/BrowserHistory.js b/modules/BrowserHistory.js index 4f0b348b51..76d818ddb2 100644 --- a/modules/BrowserHistory.js +++ b/modules/BrowserHistory.js @@ -105,7 +105,7 @@ class BrowserHistory extends DOMHistory { window.location.replace(path); } } - } +export var history = new BrowserHistory; export default BrowserHistory; diff --git a/modules/DOMHistory.js b/modules/DOMHistory.js index 0f068601bc..bb2cadeb31 100644 --- a/modules/DOMHistory.js +++ b/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; diff --git a/modules/HashHistory.js b/modules/HashHistory.js index 85387022d9..5203ffead7 100644 --- a/modules/HashHistory.js +++ b/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; diff --git a/modules/__tests__/BrowserHistory-test.js b/modules/__tests__/BrowserHistory-test.js index ae65130ce5..292d563136 100644 --- a/modules/__tests__/BrowserHistory-test.js +++ b/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); }); diff --git a/modules/__tests__/HashHistory-test.js b/modules/__tests__/HashHistory-test.js index 24ec216b7a..e243209bac 100644 --- a/modules/__tests__/HashHistory-test.js +++ b/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); }); diff --git a/modules/__tests__/MemoryHistory-test.js b/modules/__tests__/MemoryHistory-test.js index 2bbff001b1..c9ef0852c2 100644 --- a/modules/__tests__/MemoryHistory-test.js +++ b/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');