react-router-config - renderRoutes(routes, otherProps = {})

packages/react-router-config/README.md

@@ -181,7 +181,7 @@ import routes from './routes'
 
 Again, that's all pseudo-code. There are a lot of ways to do server rendering with data and pending navigation and we haven't settled on one. The point here is that `matchRoutes` gives you a chance to match statically outside of the render lifecycle. We'd like to make a demo app of this approach eventually.
 
-### `renderRoutes(routes)`
+### `renderRoutes(routes, otherProps = {})`
 
 In order to ensure that matching outside of render with `matchRoutes` and inside of render result in the same branch, you must use `renderRoutes` instead of `<Route>` inside your components. You can render a `<Route>` still, but know that it will not be accounted for in `matchRoutes` outside of render.
 
@@ -225,13 +225,14 @@ const Child = ({ route }) => (
   <div>
     <h2>Child</h2>
     {/* child routes won't render without this */}
-    {renderRoutes(route.routes)}
+    {renderRoutes(route.routes, { someProp: 'these extra props are optional' })}
   </div>
 )
 
-const GrandChild = () => (
+const GrandChild = ({ someProp }) => (
   <div>
     <h3>Grand Child</h3>
+    <div>{someProp}</div>
   </div>
 )
 

packages/react-router-config/modules/renderRoutes.js

@@ -2,11 +2,11 @@ import React from 'react'
 import Switch from 'react-router/Switch'
 import Route from 'react-router/Route'
 
-const renderRoutes = (routes) => routes ? (
+const renderRoutes = (routes, otherProps = {}) => routes ? (
   <Switch>
     {routes.map((route, i) => (
       <Route key={i} path={route.path} exact={route.exact} strict={route.strict} render={(props) => (
-        <route.component {...props} route={route}/>
+        <route.component {...props} {...otherProps} route={route}/>
       )}/>
     ))}
   </Switch>