feat: support subroutes with react-router

Author: calvinl

common/js/components/common/RouteWithSubRoutes/index.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Route } from 'react-router';
+
+const RouteWithSubRoutes = props => {
+  const {
+    path,
+    computedMatch,
+    component: Component,
+    routes,
+    restProps
+  } = props;
+
+  return (
+    <Route
+      path={path}
+      render={props => {
+        // pass the sub-routes down to keep nesting
+        return (
+          <Component
+            {...props}
+            {...restProps}
+            match={computedMatch}
+            routes={routes}
+          />
+        );
+      }}
+    />
+  );
+};
+
+export default RouteWithSubRoutes;

common/js/components/common/index.js

@@ -1,3 +1,4 @@
 export { default as ErrorPage } from './ErrorPage';
 export { default as Footer } from './Footer';
 export { default as Header } from './Header';
+export { default as RouteWithSubRoutes } from './RouteWithSubRoutes';

common/js/containers/App/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Switch, Route } from 'react-router-dom';
+import { Switch } from 'react-router-dom';
+import { RouteWithSubRoutes } from 'components/common';
 import { Container } from 'semantic-ui-react';
 import { Header, Footer } from 'components/common';
 import routes from 'routes';
@@ -8,7 +9,9 @@ const App = () => (
   <Container fluid={false}>
     <Header />
     <Switch>
-      {routes.map(route => <Route key={route.path} {...route} />)}
+      {routes.map(route => (
+        <RouteWithSubRoutes key={route.path} {...route} />
+      ))}
     </Switch>
     <Footer />
   </Container>