diff --git a/modules/components/Routes.js b/modules/components/Routes.js
index db6df0b4b2..06cae7bd2f 100644
--- a/modules/components/Routes.js
+++ b/modules/components/Routes.js
@@ -30,7 +30,7 @@ function findMatches(path, routes, defaultRoute, notFoundRoute) {
if (matches != null) {
var rootParams = getRootMatch(matches).params;
-
+
params = route.props.paramNames.reduce(function (params, paramName) {
params[paramName] = rootParams[paramName];
return params;
@@ -225,7 +225,21 @@ function returnNull() {
return null;
}
-function computeHandlerProps(matches, query) {
+function computeHandlerProps(matches, query, userSuppliedHandlerProps) {
+ /**
+ * In the tree:
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ * `computeHandlerProps` constructs the `props` that get passed into .
+ */
+
var handler = returnNull;
var props = {
ref: null,
@@ -235,10 +249,26 @@ function computeHandlerProps(matches, query) {
key: null
};
+ /**
+ * Recursively passes `handler`s down the tree, effectively creating:
+ *
+ * null
+ * }/>
+ * }/>
+ * }/>
+ */
reversedArray(matches).forEach(function (match) {
var route = match.route;
+ // DEPRECATED (unreserved props)
props = Route.getUnreservedProps(route.props);
+ // TODO: remove the above line and move the following line
+ // into the parent scope (below `var props`)
+ props = copyProperties(props, userSuppliedHandlerProps);
+
props.ref = '__activeRoute__';
props.params = match.params;
@@ -412,7 +442,7 @@ var Routes = React.createClass({
* Returns the props that should be used for the top-level route handler.
*/
getHandlerProps: function () {
- return computeHandlerProps(this.state.matches, this.state.activeQuery);
+ return computeHandlerProps(this.state.matches, this.state.activeQuery, this.props.handlerProps);
},
/**
diff --git a/modules/components/__tests__/Routes-test.js b/modules/components/__tests__/Routes-test.js
index ac647c5b30..59f86c5da1 100644
--- a/modules/components/__tests__/Routes-test.js
+++ b/modules/components/__tests__/Routes-test.js
@@ -69,4 +69,31 @@ describe('A Routes', function () {
});
});
+ describe('with `handlerProps`', function () {
+ var component;
+ var expectedResult = "passed in from handlerProps";
+
+
+ beforeEach(function () {
+ component = ReactTestUtils.renderIntoDocument(
+ Routes({ handlerProps: { echo: expectedResult } },
+ Route({ handler: NullHandler },
+ Route({ handler: NullHandler })
+ )
+ )
+ );
+ });
+
+ afterEach(function () {
+ React.unmountComponentAtNode(component.getDOMNode());
+ });
+
+ it('returns an array with the correct params', function () {
+ // component.props gives you 's props
+ // component.render().props appears to give you the deepest child's props
+ // this is my first time unit testing a React component,
+ // so please show me the right way to do this. =)
+ expect(component.render().props.echo).toEqual(expectedResult);
+ });
+ });
});