1.3 Routing

Author: serranoarevalo

components/NavBar.js

@@ -0,0 +1,18 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+export default function NavBar() {
+  const router = useRouter();
+  return (
+    <nav>
+      <Link href="/">
+        <a style={{ color: router.pathname === "/" ? "red" : "blue" }}>Home</a>
+      </Link>
+      <Link href="/about">
+        <a style={{ color: router.pathname === "/about" ? "red" : "blue" }}>
+          About
+        </a>
+      </Link>
+    </nav>
+  );
+}

pages/about.js

@@ -1,3 +1,10 @@
+import NavBar from "../components/NavBar";
+
 export default function Potato() {
-  return "about us";
+  return (
+    <div>
+      <NavBar />
+      <h1>About</h1>
+    </div>
+  );
 }

pages/index.js

@@ -1,11 +1,10 @@
-import { useState } from "react";
+import NavBar from "../components/NavBar";
 
 export default function Home() {
-  const [counter, setCounter] = useState(0);
   return (
     <div>
-      <h1>Hello {counter}</h1>
-      <button onClick={() => setCounter((prev) => prev + 1)}>+</button>
+      <NavBar />
+      <h1>Hello</h1>
     </div>
   );
 }