Remove subscriptions, withRouter

## Why remove subscriptions?

1. They are hard to understand
2. They fight against React
3. They were causing *lots of cascading re-renders on popstate* that we’d have to start doing our own scheduling/batching to get around D:

## 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}/>
)}/>
```

We implemented subscriptions so that deep updates would work in Redux out of the box (no react-router-redux needed). 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.

## Why remove withRouter?

It has the same cascading render problem (because it used subscriptions), we don’t want to deal with that. `withRouter` has been about getting access to the imperative router API. It can easily be added to app manually in two lines:

```
const withRouter = (Comp) => (props) =>
  <Route render={(router) => <Comp {…props} {…router}/>
```

## 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 and fighting against React.

Author: ryanflorence

packages/react-router/modules/Route.js

@@ -2,17 +2,17 @@ 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 childContextTypes = {
+    router: PropTypes.object.isRequired
   }
 
   static propTypes = {
@@ -29,37 +29,22 @@ class Route extends React.Component {
     location: PropTypes.object
   }
 
-  static childContextTypes = {
-    router: PropTypes.object.isRequired
+  state = {
+    match: this.computeMatch(this.props)
   }
 
   getChildContext() {
     return {
-      router: this.router
+      router: {
+        ...this.context.router,
+        match: this.state.match
+      }
     }
   }
 
-  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()
-    })
-  }
-
   componentWillReceiveProps(nextProps) {
-    Object.assign(this.router, {
-      match: computeMatch(this.router, nextProps)
+    this.setState({
+      match: this.computeMatch(nextProps)
     })
 
     warning(
@@ -72,19 +57,23 @@ 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 = { ...this.context.router, 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)

packages/react-router/modules/Router.js

@@ -16,7 +16,7 @@ class Router extends React.Component {
 
   getChildContext() {
     return {
-      router: this.router
+      router: this.props.history
     }
   }
 
@@ -28,24 +28,15 @@ class Router extends React.Component {
       'A <Router> may have only one child element'
     )
 
-    this.router = {
-      ...history,
-      match: {
-        path: '/',
-        url: '/',
-        params: {},
-        isExact: history.location.pathname === '/'
-      }
-    }
-
-    history.listen(() => {
-      Object.assign(this.router, history)
-      Object.assign(this.router.match, {
-        isExact: history.location.pathname === '/'
-      })
+    this.unlisten = history.listen(() => {
+      this.forceUpdate()
     })
   }
 
+  componentWillUnmount() {
+    this.unlisten()
+  }
+
   render() {
     const { children } = this.props
     return children ? React.Children.only(children) : null

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

@@ -4,6 +4,8 @@ import Router from '../Router'
 import ReactDOM from 'react-dom'
 import createHistory from 'history/createMemoryHistory'
 
+const fakeHistory = { listen: () => () => {} }
+
 describe('A <Router>', () => {
   const node = document.createElement('div')
 
@@ -15,7 +17,7 @@ describe('A <Router>', () => {
     it('throws an error explaining a Router can only have one child', () => {
       expect(() => {
         ReactDOM.render(
-          <Router history={createHistory()}>
+          <Router history={fakeHistory}>
             <p>Foo</p>
             <p>Bar</p>
           </Router>,
@@ -29,7 +31,7 @@ describe('A <Router>', () => {
     it('does not throw an error', () => {
       expect(() => {
         ReactDOM.render(
-          <Router history={createHistory()}>
+          <Router history={fakeHistory}>
             <p>Bar</p>
           </Router>,
           node
@@ -42,89 +44,10 @@ describe('A <Router>', () => {
     it('does not throw an error', () => {
       expect(() => {
         ReactDOM.render(
-          <Router history={createHistory()} />,
+          <Router history={fakeHistory} />,
           node
         )
       }).toNotThrow()
     })
   })
-
-  describe('context.router', () => {
-    let rootContext
-    const ContextChecker = (props, context) => {
-      rootContext = context.router
-      return null
-    }
-    ContextChecker.contextTypes = { router: React.PropTypes.object }
-
-    afterEach(() => {
-      rootContext = undefined
-    })
-
-    it('sets a root match', () => {
-      const history = createHistory({ initialEntries: ['/'] })
-      ReactDOM.render(
-        <Router history={history}>
-          <ContextChecker />
-        </Router>,
-        node
-      )
-      expect(rootContext.match).toEqual({
-        path: '/',
-        url: '/',
-        params: {},
-        isExact: true
-      })
-    })
-
-    it('spreads the history object\'s properties', () => {
-      const history = createHistory()
-      ReactDOM.render(
-        <Router history={history}>
-          <ContextChecker />
-        </Router>,
-        node
-      )
-
-      Object.keys(history).forEach(key => {
-        expect(rootContext[key]).toEqual(history[key])
-      })
-    })
-
-    it('updates history properties upon navigation', () => {
-      const history = createHistory()
-      ReactDOM.render(
-        <Router history={history}>
-          <ContextChecker />
-        </Router>,
-        node
-      )
-      expect(rootContext.length).toBe(1)
-
-      const newLocation = { pathname: '/new' }
-      history.push(newLocation)
-
-      Object.keys(newLocation).forEach(key => {
-        expect(rootContext.location[key]).toEqual(newLocation[key])
-      })
-      expect(rootContext.action).toBe('PUSH')
-      expect(rootContext.length).toBe(2)
-    })
-
-    it('updates match.isExact upon navigation', () => {
-      const history = createHistory({ initialEntries: ['/'] })
-      ReactDOM.render(
-        <Router history={history}>
-          <ContextChecker />
-        </Router>,
-        node
-      )
-      expect(rootContext.match.isExact).toBe(true)
-
-      const newLocation = { pathname: '/new' }
-      history.push(newLocation)
-
-      expect(rootContext.match.isExact).toBe(false)
-    })
-  })
 })

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

@@ -6,4 +6,3 @@ export Router from './Router'
 export StaticRouter from './StaticRouter'
 export Switch from './Switch'
 export matchPath from './matchPath'
-export withRouter from './withRouter'