diff --git a/js/components/ascribe_routes/proxy_route.js b/js/components/ascribe_routes/proxy_route.js index 6109710a..196d0875 100644 --- a/js/components/ascribe_routes/proxy_route.js +++ b/js/components/ascribe_routes/proxy_route.js @@ -19,6 +19,43 @@ const ProxyRoute = React.createClass({ statics: { createRouteFromReactElement(element) { + /** + * Generally creating custom `Route`s is not supported by react-router. + * + * However, if we take a look at how `Route`s are declared in the repo, + * we see that it's fairly straight forward: + * - https://github.com/rackt/react-router/blob/master/modules/Route.js#L21 + * + * ``` + * const route = createRouteFromReactElement(element) + * + * [...] + * + * return route; + * ``` + * + * Unfortunately, though `createRouteFromReactElement` is not exported by + * react-router, as can be seen here: + * - https://github.com/rackt/react-router/blob/master/modules/index.js#L19 + * + * Still there is a trick we can use to call this method manually. + * We call `createRoutes`: + * - (https://github.com/rackt/react-router/blob/master/modules/RouteUtils.js#L91) + * which then calls `createRoutesFromReactChildren` + * + * For each route element submitted as an array, this method checks if + * `element.type.createRouteFromReactElement` is `true` or `false`. + * + * So what we can do is just simply set our element's `type.createRouteFromReactElement` + * to `false`, so that the if statement falls into the methods `else` case and calls + * `createRouteFromReactElement`: + * - https://github.com/rackt/react-router/blob/master/modules/RouteUtils.js#L77 + * + * After returning from `createRoutes`, we set `element.type.createRouteFromReactElement` + * to its original value and replace route's `component`, with our manually inserted + * component. + */ + const createRouteFromReactElementCopy = element.type.createRouteFromReactElement; element.type.createRouteFromReactElement = false; const [ route ] = createRoutes(element); @@ -35,7 +72,7 @@ const ProxyRoute = React.createClass({ render() { invariant( false, - 'Some error message' + ' elements are for router configuration only and should not be rendered' ); } });