Remove subscriptions

This commit builds upon (and supersedes) the work done by @ryanflorence
in #4598 to remove subscriptions from the codebase. Instead of
subscribing to location changes and using forceUpdate inside every
<Route>, we better follow React's model by using setState in <Router>
and letting changes trickle down to descendants using React's built-in
state propagation mechanism.

This also means that we don't mutate context.router anymore (no more
Object.assign). Instead, context.router was split into two parts:
context.history and context.route (the <Route> props + match). This
allows us to leave context.history untouched and change context.route
only according to the props + match state of each <Route>.

withRouter was also updated to provide everything in a "router" prop
instead of spreading all props to the component.

Author: mjackson

packages/react-router-dom/modules/Link.js

@@ -4,11 +4,11 @@ const isModifiedEvent = (event) =>
   !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey)
 
 /**
- * The public API for rendering a router-aware <a>.
+ * The public API for rendering a history-aware <a>.
  */
 class Link extends React.Component {
   static contextTypes = {
-    router: PropTypes.shape({
+    history: PropTypes.shape({
       push: PropTypes.func.isRequired,
       replace: PropTypes.func.isRequired,
       createHref: PropTypes.func.isRequired
@@ -41,21 +41,21 @@ class Link extends React.Component {
     ) {
       event.preventDefault()
 
-      const { router } = this.context
+      const { history } = this.context
       const { replace, to } = this.props
 
       if (replace) {
-        router.replace(to)
+        history.replace(to)
       } else {
-        router.push(to)
+        history.push(to)
       }
     }
   }
 
   render() {
     const { replace, to, ...props } = this.props // eslint-disable-line no-unused-vars
 
-    const href = this.context.router.createHref(
+    const href = this.context.history.createHref(
       typeof to === 'string' ? { pathname: to } : to
     )
 

packages/react-router-dom/modules/__tests__/BrowserRouter-test.js

@@ -4,25 +4,25 @@ import ReactDOM from 'react-dom'
 import BrowserRouter from '../BrowserRouter'
 
 describe('A <BrowserRouter>', () => {
-  it('puts a router on context', () => {
-    let router
-    const RouterSubject = (props, context) => {
-      router = context.router
+  it('puts history on context', () => {
+    let history
+    const ContextChecker = (props, context) => {
+      history = context.history
       return null
     }
 
-    RouterSubject.contextTypes = {
-      router: PropTypes.object.isRequired
+    ContextChecker.contextTypes = {
+      history: PropTypes.object.isRequired
     }
 
     const node = document.createElement('div')
 
     ReactDOM.render((
       <BrowserRouter>
-        <RouterSubject/>
+        <ContextChecker/>
       </BrowserRouter>
     ), node)
 
-    expect(router).toBeAn('object')
+    expect(history).toBeAn('object')
   })
 })

packages/react-router-dom/modules/__tests__/HashRouter-test.js

@@ -4,25 +4,25 @@ import ReactDOM from 'react-dom'
 import HashRouter from '../HashRouter'
 
 describe('A <HashRouter>', () => {
-  it('puts a router on context', () => {
-    let router
-    const RouterSubject = (props, context) => {
-      router = context.router
+  it('puts history on context', () => {
+    let history
+    const ContextChecker = (props, context) => {
+      history = context.history
       return null
     }
 
-    RouterSubject.contextTypes = {
-      router: PropTypes.object.isRequired
+    ContextChecker.contextTypes = {
+      history: PropTypes.object.isRequired
     }
 
     const node = document.createElement('div')
 
     ReactDOM.render((
       <HashRouter>
-        <RouterSubject/>
+        <ContextChecker/>
       </HashRouter>
     ), node)
 
-    expect(router).toBeAn('object')
+    expect(history).toBeAn('object')
   })
 })

packages/react-router-dom/modules/__tests__/NavLink-test.js

@@ -32,7 +32,7 @@ describe('NavLink', () => {
             to='/pizza'
             style={defaultStyle}
             activeStyle={activeStyle}
-            >
+          >
             Pizza!
           </NavLink>
         </MemoryRouter>

packages/react-router-website/modules/components/APIDocs.js

@@ -48,8 +48,8 @@ const docs = [
   { name: 'withRouter',
     html: require('../../../react-router/docs/withRouter.md')
   },
-  { name: 'context.router',
-    html: require('../../../react-router/docs/context.router.md')
+  { name: 'context.history',
+    html: require('../../../react-router/docs/context.history.md')
   },
   { name: 'history',
     html: require('../../../react-router/docs/history.md')

packages/react-router/docs/Route.md

@@ -23,7 +23,7 @@ You should use only one of these props on a given `<Route>`. See their explanati
 
 ## component: func
 
-A React component to render when the location matches. The component receives all the properties on [`context.router`](context.router.md).
+A React component to render when the location matches. The component receives all the properties of the [`history`](history.md) object as well as the [`match`](match.md) object that describes how the route matched the current `location`.
 
 ```js
 <Route path="/user/:username" component={User}/>
@@ -39,7 +39,7 @@ When you use `component` (instead of `render`, below) the router uses [`React.cr
 
 ## render: func
 
-Instead of having a new [React element](https://facebook.github.io/react/docs/rendering-elements.html) created for you using the [`component`](#component-func) prop, you can pass in a function to be called when the location matches. The `render` prop receives all the properties of [`context.router`](context.router.md) in a single object.
+Instead of having a new [React element](https://facebook.github.io/react/docs/rendering-elements.html) created for you using the [`component`](#component-func) prop, you can pass in a function to be called when the location matches. The `render` prop receives all the properties of the [`history`](history.md) object and the [`match`](match.md) in a single object (same props as the `component` receives).
 
 This allows for convenient inline match rendering and wrapping.
 
@@ -65,7 +65,7 @@ const FadingRoute = ({ component: Component, ...rest }) => (
 
 Sometimes you need to render whether the path matches the location or not. In these cases, you can use the function `children` prop. It works exactly like `render` except that it gets called whether there is a match or not.
 
-The `children` prop will be called with an object that contains all the properties on [`context.router`](context.router.md). If a route fails to match the URL, the `match` prop will be `null`. This allows you to dynamically adjust your UI based on if the route matches or not.
+The `children` prop will be called with an object that contains all the properties of the [`history`](history.md) object. If a route fails to match the URL, the `match` prop will be `null`. This allows you to dynamically adjust your UI based on if the route matches or not.
 
 Here we're adding an `active` class if the route matches
 

packages/react-router/docs/context.history.md

@@ -0,0 +1,7 @@
+# context.history
+
+Every [`<Router>`](Router.md) puts its [`history`](history.md) object on [`context`](https://facebook.github.io/react/docs/context.html) as `context.history`. This object is used internally to open a channel of communication between e.g. a `<Router>` and its descendant [`<Route>`](Route.md)s, [`<Link>`](../../react-router-dom/docs/Link.md)s, and [`<Prompt>`](Prompt.md)s, etc.
+
+`context.history` is also occasionally useful as public API, for example, in instances when you need to access the router's imperative API directly. However, we encourage you to use `context.history` only as a last resort. Context itself is an experimental API and may break in a future release of React.
+
+All of the rendering methods in [`<Route>`](Route.md) receive all the properties on `context.history`, so you shouldn't ever need to access it directly for rendering. Also, you can navigate (`push` or `replace`) using a [`<Redirect>`](Redirect.md) element.

packages/react-router/docs/context.router.md

@@ -1,6 +1,6 @@
 # withRouter
 
-You can get access to the [`router`](context.router.md)'s properties via the `withRouter` higher-order component. This is the recommended way to access the `router` object. `withRouter` will re-render its component every time the route changes.
+You can get access to the [`history`](history.md) object's properties and the closest [`<Route>`](Route.md)'s [`match`](match.md) via the `withRouter` higher-order component. `withRouter` will re-render its component every time the route changes with a single `router` prop.
 
 ```js
 import React, { PropTypes } from 'react'
@@ -9,12 +9,14 @@ import { withRouter } from 'react-router'
 // A simple component that shows the pathname of the current location
 class ShowTheLocation extends React.Component {
   static propTypes = {
-    location: PropTypes.object.isRequired
+    router: PropTypes.object.isRequired
   }
 
   render() {
+    const { router } = this.props
+
     return (
-      <div>You are now at {this.props.location.pathname}</div>
+      <div>You are now at {router.location.pathname}</div>
     )
   }
 }

packages/react-router/docs/withRouter.md

@@ -4,9 +4,6 @@
     "stage-1",
     "react"
   ],
-  "plugins": [
-    "transform-object-assign"
-  ],
   "env": {
     "production": {
       "plugins": [

packages/react-router/modules/.babelrc

@@ -6,7 +6,7 @@ import React, { PropTypes } from 'react'
  */
 class Prompt extends React.Component {
   static contextTypes = {
-    router: PropTypes.shape({
+    history: PropTypes.shape({
       block: PropTypes.func.isRequired
     }).isRequired
   }
@@ -27,7 +27,7 @@ class Prompt extends React.Component {
     if (this.unblock)
       this.unblock()
 
-    this.unblock = this.context.router.block(message)
+    this.unblock = this.context.history.block(message)
   }
 
   disable() {

packages/react-router/modules/Prompt.js

@@ -6,7 +6,7 @@ import React, { PropTypes } from 'react'
  */
 class Redirect extends React.Component {
   static contextTypes = {
-    router: PropTypes.shape({
+    history: PropTypes.shape({
       push: PropTypes.func.isRequired,
       replace: PropTypes.func.isRequired,
       staticContext: PropTypes.object
@@ -26,23 +26,23 @@ class Redirect extends React.Component {
   }
 
   componentWillMount() {
-    if (this.context.router.staticContext)
+    if (this.context.history.staticContext)
       this.perform()
   }
 
   componentDidMount() {
-    if (!this.context.router.staticContext)
+    if (!this.context.history.staticContext)
       this.perform()
   }
 
   perform() {
-    const { router } = this.context
+    const { history } = this.context
     const { push, to } = this.props
 
     if (push) {
-      router.push(to)
+      history.push(to)
     } else {
-      router.replace(to)
+      history.replace(to)
     }
   }
 

packages/react-router/modules/Redirect.js

@@ -1,18 +1,13 @@
-import React, { PropTypes } from 'react'
 import warning from 'warning'
+import React, { PropTypes } from 'react'
 import matchPath from './matchPath'
 
-const computeMatch = (router, { location, computedMatch, path, exact, strict }) =>
-  computedMatch || matchPath((location || router.location).pathname, { path, exact, strict })
-
 /**
  * The public API for matching a single path and rendering.
  */
 class Route extends React.Component {
   static contextTypes = {
-    router: PropTypes.shape({
-      listen: PropTypes.func.isRequired
-    }).isRequired
+    history: PropTypes.object.isRequired
   }
 
   static propTypes = {
@@ -30,61 +25,57 @@ class Route extends React.Component {
   }
 
   static childContextTypes = {
-    router: PropTypes.object.isRequired
+    route: PropTypes.object.isRequired
   }
 
   getChildContext() {
     return {
-      router: this.router
+      route: {
+        ...this.props,
+        match: this.state.match
+      }
     }
   }
 
-  componentWillMount() {
-    const parentRouter = this.context.router
+  state = {
+    match: this.computeMatch(this.props)
+  }
 
-    this.router = {
-      ...parentRouter,
-      match: computeMatch(parentRouter, this.props)
-    }
+  computeMatch({ computedMatch, location, path, strict, exact }) {
+    if (computedMatch)
+      return computedMatch // <Switch> already computed the match for us
 
-    // Start listening here so we can <Redirect> on the initial render.
-    this.unlisten = parentRouter.listen(() => {
-      Object.assign(this.router, parentRouter, {
-        match: computeMatch(parentRouter, this.props)
-      })
+    const pathname = (location || this.context.history.location).pathname
 
-      this.forceUpdate()
-    })
+    return matchPath(pathname, { path, strict, exact })
   }
 
   componentWillReceiveProps(nextProps) {
-    Object.assign(this.router, {
-      match: computeMatch(this.router, nextProps)
-    })
-
     warning(
       !(nextProps.location && !this.props.location),
-      'You cannot change from an uncontrolled to controlled Route. You passed in a `location` prop on a re-render when initially there was none.'
+      '<Route> elements should not change from uncontrolled to controlled (or vice versa). You initially used no "location" prop and then provided one on a subsequent render.'
     )
+
     warning(
       !(!nextProps.location && this.props.location),
-      'You cannot change from a controlled to an uncontrolled Route. You passed in a `location` prop initially but on a re-render there was none.'
+      '<Route> elements should not change from controlled to uncontrolled (or vice versa). You provided a "location" prop initially but omitted it on a subsequent render.'
     )
-  }
 
-  componentWillUnmount() {
-    this.unlisten()
+    this.setState({
+      match: this.computeMatch(nextProps)
+    })
   }
 
   render() {
+    const { match } = this.state
     const { children, component, render } = this.props
-    const props = { ...this.router }
+    const props = { ...this.context.history, match }
 
     return (
       component ? ( // component prop gets first priority, only called if there's a match
-        props.match ? React.createElement(component, props) : null
+        match ? React.createElement(component, props) : null
       ) : render ? ( // render prop is next, only called if there's a match
-        props.match ? render(props) : null
+        match ? render(props) : null
       ) : children ? ( // children come last, always called
         typeof children === 'function' ? (
           children(props)