add inline rendering prop to app component

src/App.jsx

@@ -73,9 +73,17 @@ class App extends Component {
 
   render () {
     const { config, isNavOpen } = this.state;
-    const { navLabel = '', routeGroups = [] } = this.props;
+    const {
+      render,
+      routeGroups = [],
+      navLabel = '',
+    } = this.props;
 
-    const header = (
+    return (
+      <ConfigContext.Provider value={config}>
+        <Page
+          usecondensed="True"
+          header={(
             <PageHeader
               showNavToggle
               onNavToggle={() => this.onNavToggle()}
@@ -92,16 +100,15 @@ class App extends Component {
                     </ToolbarItem>
                     <ToolbarItem>
                       <LogoutButton
-                  onDevLogout={() => this.onDevLogout()}
+                        onDevLogout={this.onLogout}
                       />
                     </ToolbarItem>
                   </ToolbarGroup>
                 </Toolbar>
               )}
             />
-    );
+          )}
-
+          sidebar={(
-    const sidebar = (
             <PageSidebar
               isNavOpen={isNavOpen}
               nav={(
@@ -114,34 +121,9 @@ class App extends Component {
                 </Nav>
               )}
             />
-    );
-
-    return (
-      <ConfigContext.Provider value={config}>
-        <Page
-          usecondensed="True"
-          header={header}
-          sidebar={sidebar}
-        >
-        {
-          //
-          // Extract a flattened array of all route params from the provided route config
-          // and use it to render route components.
-          //
-          // [{ routes }, { routes }] -> [route, route, route] -> (<Route/><Route/><Route/>)
-          //
-          routeGroups
-            .reduce((allRoutes, { routes }) => allRoutes.concat(routes), [])
-            .map(({ component: Component, path }) => (
-              <Route
-                key={path}
-                path={path}
-                render={params => (
-                  <Component {...params } />
           )}
-              />
+        >
-          ))
+          { render ? render({ routeGroups }) : '' }
-        }
         </Page>
       </ConfigContext.Provider>
     );

src/index.jsx

@@ -235,6 +235,21 @@ export async function main () {
                             ],
                           },
                         ]}
+                        render={({ routeGroups }) => (
+                          routeGroups
+                            .reduce((allRoutes, { routes }) => allRoutes.concat(routes), [])
+                            .map(({ component: PageComponent, path }) => (
+                              <Route
+                                key={path}
+                                path={path}
+                                render={({ match }) => (
+                                  <PageComponent
+                                    match={match}
+                                  />
+                                )}
+                              />
+                          ))
+                        )}
                       />
                     )}
                   />