Remove subscriptions

1. They are hard to understand
2. They don’t feel like React
3. They were causing *lots of re-rendering on popstate* that we’d have to start doing our own scheduling/batching to get around D:

## But what about `shouldComponentUpdate`?

Pass `location` to the `PureComponent` (or whatever). If a component as a Route or Switch in it then `location` needs to be a part of the
sCU diffing.

```jsx
<Route render={({ location }) => (
  <SomePureComponent location={location}/>
)}/>
```

Also, `withRouter` continues to subscribe directly to history if somebody would rather jump into the subscription world instead of passing a prop down.

## What about Redux?

We implemented subscriptions so that deep updates work in Redux. But, Redux users want more than just that.

They want to:

1. get deep updates that survive redux’s automatic sCU
2. read routing state from the store, not components
3. navigate with dispatch
4. sync the url and store so the devtools time-travel/upload debugging tools work

Subscriptions only solved (1). To get the rest requires the exact same touch points whether we do subscriptions or not.

## In summary

Since the Redux integration story is identical whether we use subscriptions or not, and normal sCU can be solved by just passing the `location` to the optimized components, there’s no reason we need to keep using subscriptions.

We’re bowing out of a fight against React where we implement our own scheduling of updates. Also, we still have `withRouter` if people feel like stepping into the ring.

Author: ryanflorence

packages/react-router/modules/Route.js

@@ -2,17 +2,13 @@ import React, { PropTypes } from 'react'
 import warning from 'warning'
 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
+    router: PropTypes.object.isRequired
   }
 
   static propTypes = {
@@ -29,37 +25,13 @@ class Route extends React.Component {
     location: PropTypes.object
   }
 
-  static childContextTypes = {
-    router: PropTypes.object.isRequired
-  }
-
-  getChildContext() {
-    return {
-      router: this.router
-    }
-  }
-
-  componentWillMount() {
-    const parentRouter = this.context.router
-
-    this.router = {
-      ...parentRouter,
-      match: computeMatch(parentRouter, this.props)
-    }
-
-    // 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)
-      })
-
-      this.forceUpdate()
-    })
+  state = {
+    match: this.computeMatch(this.props)
   }
 
   componentWillReceiveProps(nextProps) {
-    Object.assign(this.router, {
-      match: computeMatch(this.router, nextProps)
+    this.setState({
+      match: this.computeMatch(nextProps)
     })
 
     warning(
@@ -72,13 +44,17 @@ class Route extends React.Component {
     )
   }
 
-  componentWillUnmount() {
-    this.unlisten()
+  computeMatch(props) {
+    const { location, computedMatch, path, exact, strict } = props
+    const { router } = this.context
+    const pathname = (location || router.location).pathname
+    return computedMatch || matchPath(pathname, { path, exact, strict })
   }
 
   render() {
     const { children, component, render } = this.props
-    const props = { ...this.router }
+    const { match } = this.state
+    const props = { match, ...this.context.router }
 
     return (
       component ? ( // component prop gets first priority, only called if there's a match

packages/react-router/modules/Router.js

@@ -21,12 +21,20 @@ class Router extends React.Component {
   }
 
   componentWillMount() {
-    const { children } = this.props
+    const { children, history } = this.props
 
     invariant(
       children == null || React.Children.count(children) === 1,
       'A <Router> may have only one child element'
     )
+
+    this.unlisten = history.listen(() => {
+      this.forceUpdate()
+    })
+  }
+
+  componentWillUnmount() {
+    this.unlisten()
   }
 
   render() {

packages/react-router/modules/Switch.js

@@ -7,33 +7,14 @@ import matchPath from './matchPath'
  */
 class Switch extends React.Component {
   static contextTypes = {
-    router: PropTypes.shape({
-      listen: PropTypes.func.isRequired
-    }).isRequired
+    router: PropTypes.object.isRequired
   }
 
   static propTypes = {
     children: PropTypes.node,
     location: PropTypes.object
   }
 
-  state = {
-    location: this.props.location || this.context.router.location
-  }
-
-  componentWillMount() {
-    if (!this.props.location) {
-      const { router } = this.context
-
-      // Start listening here so we can <Redirect> on the initial render.
-      this.unlisten = router.listen(() => {
-        this.setState({
-          location: router.location
-        })
-      })
-    }
-  }
-
   componentWillReceiveProps(nextProps) {
     warning(
       !(nextProps.location && !this.props.location),
@@ -46,14 +27,9 @@ class Switch extends React.Component {
     )
   }
 
-  componentWillUnmount() {
-    if (this.unlisten)
-      this.unlisten()
-  }
-
   render() {
     const { children } = this.props
-    const { location } = this.state
+    const location = this.props.location || this.context.router.location
 
     let match, child
     React.Children.forEach(children, element => {

packages/react-router/modules/__tests__/Router-test.js

@@ -3,6 +3,8 @@ import React from 'react'
 import Router from '../Router'
 import ReactDOM from 'react-dom'
 
+const fakeHistory = { listen: () => () => {} }
+
 describe('A <Router>', () => {
   const node = document.createElement('div')
 
@@ -14,7 +16,7 @@ describe('A <Router>', () => {
     it('throws an error explaining a Router can only have one child', () => {
       expect(() => {
         ReactDOM.render(
-          <Router history={{}}>
+          <Router history={fakeHistory}>
             <p>Foo</p>
             <p>Bar</p>
           </Router>,
@@ -28,7 +30,7 @@ describe('A <Router>', () => {
     it('does not throw an error', () => {
       expect(() => {
         ReactDOM.render(
-          <Router history={{}}>
+          <Router history={fakeHistory}>
             <p>Bar</p>
           </Router>,
           node
@@ -41,7 +43,7 @@ describe('A <Router>', () => {
     it('does not throw an error', () => {
       expect(() => {
         ReactDOM.render(
-          <Router history={{}} />,
+          <Router history={fakeHistory} />,
           node
         )
       }).toNotThrow()