Dynaming route building with sections&pages works

react-tuto/src/index.js

@@ -60,6 +60,16 @@ function getSection(sectionIndex) {
   );
 }
 
+
+function getPage(sectionIndex, pageIndex) {
+  const section = markdown[sectionIndex];
+  const page = section.items[pageIndex];
+  return () => (
+    <Page title={page.title} md={page.content} />
+  );
+}
+
+
 function getSectionLinks(section) {
   return (
     <ul>
@@ -70,6 +80,18 @@ function getSectionLinks(section) {
   );
 }
 
+function getSectionRoutes(section, sIndex) {
+  const routes = [{
+    key: sIndex, path: section.path, component: getSection(sIndex)
+  }].concat(section.items.map((page, pIndex) => ({
+    key: sIndex + '-' + pIndex,
+    path: section.path + page.path,
+    component: getPage(sIndex, pIndex)
+  })));
+  // return <Route key={sIndex} exact path={section.path} component={getSection(sIndex)} />;
+  return routes.map(r => <Route key={r.key} exact path={r.path} component={r.component} />);
+}
+
 ReactDOM.render(
     <HashRouter>
       <div>
@@ -86,9 +108,7 @@ ReactDOM.render(
           <Route exact path="/" component={App} />
           <Route path="/md" component={MarkdownPage} />
           {
-            markdown.map((section, sIndex) => (
-              <Route key={sIndex} exact path={section.path} component={getSection(sIndex)} />
-            ))
+            markdown.map(getSectionRoutes)
           }
         </Switch>
       </div>

react-tuto/src/markdown/part2/01. Pouet.md

@@ -0,0 +1,5 @@
+### Yop Yop
+
+```java
+int anInteger = 4;
+```