back hydration

Author: ajaxsys

dist/bundle.js

@@ -8,6 +8,7 @@ function App() {
     <div>
       <nav>
         <Link to="/">Home</Link>
+        |
         <Link to="/blog/1">Blog 1</Link>
       </nav>
       <Routes>

src/App.js

@@ -1,9 +1,18 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useParams } from 'react-router-dom';
 
 function Blog() {
   const { id } = useParams();
-  return <h1>Blog Page with ID: {id}</h1>;
+  const [clicked, setClicked] = useState(false);
+
+  return (
+    <div>
+      <h1>Blog Page with ID: {id}</h1>
+      <button onClick={() => setClicked(!clicked)}>
+        {clicked ? 'Clicked!' : 'Click me'}
+      </button>
+    </div>
+  );
 }
 
 export default Blog;

src/Blog.js

@@ -1,7 +1,16 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 function Home() {
-  return <h1>Home Page</h1>;
+  const [clicked, setClicked] = useState(false);
+
+  return (
+    <div>
+      <h1>Home Page</h1>
+      <button onClick={() => setClicked(!clicked)}>
+        {clicked ? 'Clicked!' : 'Click me'}
+      </button>
+    </div>
+  );
 }
 
 export default Home;