Create a DataSourceWrapper to determine correct data source and provide data to layout component

platform/viewer/src/routes/index.js

@@ -2,16 +2,23 @@ import React from 'react';
 import { Switch, Route } from 'react-router-dom';
 
 // Route Components
+import DataSourceWrapper from './DataSourceWrapper';
 import StudyListContainer from './StudyListContainer';
 import NotFound from './NotFound';
 
 const bakedInRoutes = [
-  { path: '/', exact: true, component: StudyListContainer },
+  {
+    path: '/',
+    exact: true,
+    component: DataSourceWrapper,
+    props: { children: StudyListContainer },
+  },
   { component: NotFound },
 ];
 
 const createRoutes = routes => {
   console.log('Creating Routes: ', routes, bakedInRoutes);
+  // TODO: Shouldn't need to guard input routes with an empty array?
   const allRoutes = [...(routes || []), ...bakedInRoutes];
 
   return (
@@ -23,8 +30,10 @@ const createRoutes = routes => {
             path={route.path}
             exact={route.exact}
             strict={route.strict}
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            render={props => <route.component {...props} route={route} />}
+            render={props => (
+              // eslint-disable-next-line react/jsx-props-no-spreading
+              <route.component {...props} {...route.props} route={route} />
+            )}
           />
         );
       })}