Merge pull request #3444 from gaearon/pass-stuff-to-withrouter

Pass params and location as props in withRouter()

Author: gaearon

docs/API.md

@@ -148,7 +148,7 @@ Given a route like `<Route path="/users/:userId" />`:
 An `<IndexLink>` is like a [`<Link>`](#link), except it is only active when the current route is exactly the linked route. It is equivalent to `<Link>` with the `onlyActiveOnIndex` prop set.
 
 ### `withRouter(component)`
-A HoC (higher-order component) that wraps another component to provide `this.props.router`. Pass in your component and it will return the wrapped component.
+A HoC (higher-order component) that wraps another component to provide `this.props.router`, `this.props.params`, and `this.props.location`. Pass in your component and it will return the wrapped component.
 
 ### `<RouterContext>`
 A `<RouterContext>` renders the component tree for a given router state. Its used by `<Router>` but also useful for server rendering and integrating in brownfield development.

modules/__tests__/withRouter-test.js

@@ -11,6 +11,10 @@ describe('withRouter', function () {
   class App extends Component {
     render() {
       expect(this.props.router).toExist()
+      expect(this.props.params).toExist()
+      expect(this.props.params).toBe(this.props.router.params)
+      expect(this.props.location).toExist()
+      expect(this.props.location).toBe(this.props.router.location)
       return <h1>{this.props.router.location.pathname}</h1>
     }
   }
@@ -28,7 +32,7 @@ describe('withRouter', function () {
     unmountComponentAtNode(node)
   })
 
-  it('puts router on context', function (done) {
+  it('puts router, props and location on context', function (done) {
     const WrappedApp = withRouter(App)
 
     render((

modules/withRouter.js

@@ -10,9 +10,20 @@ 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} />
+      const { router } = this.context
+      const { params, location } = router
+      return (
+        <WrappedComponent
+          {...this.props}
+          router={router}
+          params={params}
+          location={location}
+        />
+      )
     }
   })