From e067eb8d73acc90ceaabcf61cea5b140ddc33786 Mon Sep 17 00:00:00 2001
From: Abdulghane Jesry <23579928+riobits@users.noreply.github.com>
Date: Mon, 25 Sep 2023 19:41:23 +0300
Subject: [PATCH 1/2] Update 03-linking-and-navigating.mdx

---
 .../01-routing/03-linking-and-navigating.mdx  | 31 -------------------
 1 file changed, 31 deletions(-)

diff --git a/docs/02-app/01-building-your-application/01-routing/03-linking-and-navigating.mdx b/docs/02-app/01-building-your-application/01-routing/03-linking-and-navigating.mdx
index ba053af4fa3d..2176f2e3bef0 100644
--- a/docs/02-app/01-building-your-application/01-routing/03-linking-and-navigating.mdx
+++ b/docs/02-app/01-building-your-application/01-routing/03-linking-and-navigating.mdx
@@ -95,37 +95,6 @@ export function Links() {
 }
 ```
 
-```jsx filename="app/components/links.jsx"
-'use client'
-
-import { usePathname } from 'next/navigation'
-import Link from 'next/link'
-
-export function Links() {
-  const pathname = usePathname()
-
-  return (
-    <nav>
-      <ul>
-        <li>
-          <Link className={`link ${pathname === '/' ? 'active' : ''}`} href="/">
-            Home
-          </Link>
-        </li>
-        <li>
-          <Link
-            className={`link ${pathname === '/about' ? 'active' : ''}`}
-            href="/"
-          >
-            About
-          </Link>
-        </li>
-      </ul>
-    </nav>
-  )
-}
-```
-
 #### Scrolling to an `id`
 
 The default behavior of the Next.js App Router is to scroll to the top of a new route or to maintain the scroll position for backwards and forwards navigation.

From 71d4748322f88bc1754206f79f93b6d38cdc396d Mon Sep 17 00:00:00 2001
From: Abdulghane Jesry <23579928+riobits@users.noreply.github.com>
Date: Mon, 25 Sep 2023 20:43:37 +0300
Subject: [PATCH 2/2] Update 03-linking-and-navigating.mdx

Add switcher instead
---
 .../01-routing/03-linking-and-navigating.mdx  | 33 ++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/docs/02-app/01-building-your-application/01-routing/03-linking-and-navigating.mdx b/docs/02-app/01-building-your-application/01-routing/03-linking-and-navigating.mdx
index 2176f2e3bef0..ea453912e2a9 100644
--- a/docs/02-app/01-building-your-application/01-routing/03-linking-and-navigating.mdx
+++ b/docs/02-app/01-building-your-application/01-routing/03-linking-and-navigating.mdx
@@ -64,7 +64,7 @@ export default function PostList({ posts }) {
 
 You can use [`usePathname()`](/docs/app/api-reference/functions/use-pathname) to determine if a link is active. For example, to add a class to the active link, you can check if the current `pathname` matches the `href` of the link:
 
-```tsx filename="app/components/links.tsx"
+```tsx filename="app/components/links.tsx" switcher
 'use client'
 
 import { usePathname } from 'next/navigation'
@@ -95,6 +95,37 @@ export function Links() {
 }
 ```
 
+```jsx filename="app/components/links.js" switcher
+'use client'
+
+import { usePathname } from 'next/navigation'
+import Link from 'next/link'
+
+export function Links() {
+  const pathname = usePathname()
+
+  return (
+    <nav>
+      <ul>
+        <li>
+          <Link className={`link ${pathname === '/' ? 'active' : ''}`} href="/">
+            Home
+          </Link>
+        </li>
+        <li>
+          <Link
+            className={`link ${pathname === '/about' ? 'active' : ''}`}
+            href="/about"
+          >
+            About
+          </Link>
+        </li>
+      </ul>
+    </nav>
+  )
+}
+```
+
 #### Scrolling to an `id`
 
 The default behavior of the Next.js App Router is to scroll to the top of a new route or to maintain the scroll position for backwards and forwards navigation.