static page generation

Author: chrisminnick

reactjsfoundations.com/package.json

@@ -30,6 +30,7 @@
     "start": "react-scripts start",
     "prebuild": "npm run sitemap",
     "build": "react-scripts build",
+    "postbuild": "react-snap",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "sitemap": "babel-node ./sitemap-gen.js"
@@ -66,6 +67,7 @@
     "fs": "^0.0.1-security",
     "path": "^0.12.7",
     "prettier": "^2.6.2",
-    "react-app-rewired": "^2.2.1"
+    "react-app-rewired": "^2.2.1",
+    "react-snap": "^1.23.0"
   }
 }

reactjsfoundations.com/src/chapter12/NestedRoutes.js

@@ -15,8 +15,8 @@ function Reports() {
 
   return (
     <>
-      <div>
-        <h2>Reports</h2>
+      {/*<div>
+         <h2>Reports</h2>
         <ul>
           <li>
             <Link to={`${url}/profitloss`}>Profit and Loss</Link>
@@ -37,7 +37,7 @@ function Reports() {
             <Report />
           </Route>
         </Switch>
-      </div>
+      </div> */}
       <SyntaxHighlighter language="javascript" style={github}>
         {`import {
   BrowserRouter as Router,

reactjsfoundations.com/src/index.js

@@ -1,13 +1,26 @@
 import React from 'react';
-import ReactDOM from 'react-dom/client';
+import { createRoot, hydrateRoot } from 'react-dom/client';
 import { BrowserRouter as Router } from 'react-router-dom';
 import App from './App';
 import ScrollToTop from './ScrollToTop';
 
-ReactDOM.createRoot(document.getElementById('root')).render(
-  <Router>
-    <ScrollToTop>
-      <App />
-    </ScrollToTop>
-  </Router>
-);
+const container = document.getElementById('root');
+
+if (container.hasChildNodes()) {
+  hydrateRoot(
+    container,
+    <Router>
+      <ScrollToTop>
+        <App />
+      </ScrollToTop>
+    </Router>
+  );
+} else {
+  createRoot(container).render(
+    <Router>
+      <ScrollToTop>
+        <App />
+      </ScrollToTop>
+    </Router>
+  );
+}

reactjsfoundations.com/src/routes.js

@@ -3269,7 +3269,7 @@ export default Route;
 
       <Chapter12.ViewLocation />
     </Route>
-    <Route path="/listing1216">
+    {/* <Route path="/listing1216">
       <Helmet>
         <title>
           ReactJS Foundations: Dynamic Links and Routes in nested Routes
@@ -3279,7 +3279,7 @@ export default Route;
       <PrevNext prev="/listing1215" next="/listing1301" />
 
       <Chapter12.NestedRoutes />
-    </Route>
+    </Route> */}
     <Route path="/listing1301">
       <Helmet>
         <title>ReactJS Foundations: An ErrorBoundary component</title>