Merge pull request #3443 from gaearon/with-router-static

Make withRouter() update inside static containers

Author: gaearon

modules/ContextUtils.js

@@ -1,6 +1,7 @@
 import { PropTypes } from 'react'
 
 // Works around issues with context updates failing to propagate.
+// Caveat: the context value is expected to never change its identity.
 // https://github.com/facebook/react/issues/2517
 // https://github.com/reactjs/react-router/issues/470
 

modules/Router.js

@@ -6,6 +6,7 @@ import RouterContext from './RouterContext'
 import { createRoutes } from './RouteUtils'
 import { createRouterObject } from './RouterUtils'
 import warning from './routerWarning'
+import assign from 'object-assign'
 
 const { func, object } = React.PropTypes
 
@@ -88,7 +89,9 @@ const Router = React.createClass({
       if (error) {
         this.handleError(error)
       } else {
-        this.router = this.createRouterObject(state)
+        // Keep the identity of this.router because of a caveat in ContextUtils:
+        // they only work if the object identity is preserved.
+        assign(this.router, this.createRouterObject(state))
         this.setState(state, this.props.onUpdate)
       }
     })

modules/__tests__/withRouter-test.js

@@ -11,7 +11,7 @@ describe('withRouter', function () {
   class App extends Component {
     render() {
       expect(this.props.router).toExist()
-      return <h1>App</h1>
+      return <h1>{this.props.router.location.pathname}</h1>
     }
   }
 
@@ -39,4 +39,34 @@ describe('withRouter', function () {
       done()
     })
   })
+
+  it('updates the context inside static containers', function (done) {
+    const WrappedApp = withRouter(App)
+
+    class StaticContainer extends Component {
+      shouldComponentUpdate() {
+        return false
+      }
+
+      render() {
+        return this.props.children
+      }
+    }
+
+    const history = createHistory('/')
+
+    render((
+      <Router history={history}>
+        <Route component={StaticContainer}>
+          <Route path="/" component={WrappedApp} />
+          <Route path="/hello" component={WrappedApp} />
+        </Route>
+      </Router>
+    ), node, function () {
+      expect(node.firstChild.textContent).toEqual('/')
+      history.push('/hello')
+      expect(node.firstChild.textContent).toEqual('/hello')
+      done()
+    })
+  })
 })

modules/withRouter.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import hoistStatics from 'hoist-non-react-statics'
+import { ContextSubscriber } from './ContextUtils'
 import { routerShape } from './PropTypes'
 
 function getDisplayName(WrappedComponent) {
@@ -8,6 +9,7 @@ function getDisplayName(WrappedComponent) {
 
 export default function withRouter(WrappedComponent) {
   const WithRouter = React.createClass({
+    mixins: [ ContextSubscriber('router') ],
     contextTypes: { router: routerShape },
     render() {
       return <WrappedComponent {...this.props} router={this.context.router} />

package.json

@@ -35,6 +35,7 @@
     "history": "^2.0.1",
     "hoist-non-react-statics": "^1.0.5",
     "invariant": "^2.2.1",
+    "object-assign": "^4.1.0",
     "warning": "^2.1.0"
   },
   "peerDependencies": {