Merge pull request #3442 from gaearon/pass-params

Attach current location and params to context.router

Author: gaearon

modules/Router.js

@@ -55,36 +55,43 @@ const Router = React.createClass({
     }
   },
 
-  componentWillMount() {
-    const { transitionManager, router } = this.createRouterObjects()
-
-    this._unlisten = transitionManager.listen((error, state) => {
-      if (error) {
-        this.handleError(error)
-      } else {
-        this.setState(state, this.props.onUpdate)
-      }
-    })
+  createRouterObject(state) {
+    const { matchContext } = this.props
+    if (matchContext) {
+      return matchContext.router
+    }
 
-    this.router = router
+    const { history } = this.props
+    return createRouterObject(history, this.transitionManager, state)
   },
 
-  createRouterObjects() {
+  createTransitionManager() {
     const { matchContext } = this.props
     if (matchContext) {
-      return matchContext
+      return matchContext.transitionManager
     }
 
-    let { history } = this.props
+    const { history } = this.props
     const { routes, children } = this.props
 
-    const transitionManager = createTransitionManager(
+    return createTransitionManager(
       history,
       createRoutes(routes || children)
     )
-    const router = createRouterObject(history, transitionManager)
+  },
 
-    return { transitionManager, router }
+  componentWillMount() {
+    this.transitionManager = this.createTransitionManager()
+    this.router = this.createRouterObject(this.state)
+
+    this._unlisten = this.transitionManager.listen((error, state) => {
+      if (error) {
+        this.handleError(error)
+      } else {
+        this.router = this.createRouterObject(state)
+        this.setState(state, this.props.onUpdate)
+      }
+    })
   },
 
   /* istanbul ignore next: sanity check */

modules/RouterUtils.js

@@ -1,7 +1,9 @@
-export function createRouterObject(history, transitionManager) {
+export function createRouterObject(history, transitionManager, state) {
   return {
     ...history,
     setRouteLeaveHook: transitionManager.listenBeforeLeavingRoute,
-    isActive: transitionManager.isActive
+    isActive: transitionManager.isActive,
+    location: state.location,
+    params: state.params
   }
 }

modules/__tests__/Router-test.js

@@ -297,6 +297,12 @@ describe('Router', function () {
       const assertProps = (props) => {
         expect(props.routes).toEqual([ route ])
         expect(props.components).toEqual([ MyComponent ])
+
+        expect(props.params).toEqual({})
+        expect(props.location.pathname).toEqual('/')
+        expect(props.router.params).toEqual({})
+        expect(props.router.location.pathname).toEqual('/')
+
         expect(props.foo).toBe('bar')
         expect(props.render).toNotExist()
         done()

modules/__tests__/RouterContext-test.js

@@ -31,7 +31,7 @@ describe('RouterContext', () => {
       isActive: expect.createSpy().andReturn(isActiveSentinel)
     }
 
-    router = createRouterObject(history, transitionManager)
+    router = createRouterObject(history, transitionManager, {})
 
     class Component extends React.Component {
       constructor(props, ctx) {

modules/__tests__/serverRendering-test.js

@@ -152,6 +152,17 @@ describe('server rendering', function () {
     })
   })
 
+  it('includes params and location in the props', function (done) {
+    match({ routes, location: '/dashboard' }, function (error, redirectLocation, renderProps) {
+      expect(renderProps.params).toEqual({})
+      expect(renderProps.router.params).toEqual({})
+
+      expect(renderProps.location.pathname).toEqual('/dashboard')
+      expect(renderProps.router.location.pathname).toEqual('/dashboard')
+      done()
+    })
+  })
+
   it('accepts a basename option', function (done) {
     match({ routes, location: '/dashboard', basename: '/nasebame' }, function (error, redirectLocation, renderProps) {
       const string = renderToString(

modules/match.js

@@ -39,18 +39,19 @@ function match({ history, routes, location, ...options }, callback) {
     })
   }
 
-  const router = createRouterObject(history, transitionManager)
-
   transitionManager.match(location, function (error, redirectLocation, nextState) {
-    callback(
-      error,
-      redirectLocation,
-      nextState && {
+    let renderProps
+
+    if (nextState) {
+      const router = createRouterObject(history, transitionManager, nextState)
+      renderProps = {
         ...nextState,
         router,
         matchContext: { transitionManager, router }
       }
-    )
+    }
+
+    callback(error, redirectLocation, renderProps)
 
     // Defer removing the listener to here to prevent DOM histories from having
     // to unwind DOM event listeners unnecessarily, in case callback renders a