feat(toggle):新增切换导航页

src/app/_components/xiaban/ContainerB.tsx

@@ -0,0 +1,13 @@
+"use client"
+import { usePathname, useRouter} from "next/navigation";
+
+export const ContainerB = () => {
+    const pathname = usePathname();
+    const router = useRouter();
+    return (
+      <div>
+        <button onClick={() => router.push("/a")}>路由回a</button>
+          <div>{pathname}</div>
+      </div>
+    );
+}

src/app/_components/xiaban/Content1.tsx

@@ -0,0 +1,11 @@
+"use client"
+import {usePathname, useRouter} from "next/navigation";
+
+export const Content1 = () => {
+    const router = useRouter();
+    const pathname = usePathname();
+    return <div>
+        <button onClick={() => router.push('/a/b')}>路由到b</button>
+        <div>{pathname}</div>
+    </div>
+}

src/app/_components/xiaban/Content2.tsx

@@ -0,0 +1,5 @@
+"use client"
+
+export const Content2 = () => {
+    return <div>page2</div>
+}

src/app/_components/xiaban/Content3.tsx

@@ -0,0 +1,5 @@
+"use client"
+
+export const Content3 = () => {
+    return <div>page3</div>
+}

src/app/_components/xiaban/Content4.tsx

@@ -0,0 +1,5 @@
+"use client"
+
+export const Content4 = () => {
+    return <div>page4</div>
+}

src/app/_components/xiaban/Toggle.tsx

@@ -0,0 +1,36 @@
+"use client"
+import {useState} from "react";
+import {Content1} from "@/app/_components/xiaban/Content1";
+import {Content2} from "@/app/_components/xiaban/Content2";
+import {Content3} from "@/app/_components/xiaban/Content3";
+import {Content4} from "@/app/_components/xiaban/Content4";
+
+export const Toggle = () => {
+    const [currentContent, setCurrentContent ] = useState<number>(1);
+    const active = "text-red bg-gray-200";
+    const renderContent = () => {
+        switch (currentContent){
+            case 1:
+                return <Content1></Content1>;
+            case 2:
+                return <Content2></Content2>;
+            case 3:
+                return <Content3></Content3>;
+            case 4:
+                return <Content4></Content4>;
+        }
+    }
+    return <div>
+        <div className={"space-y-10px flex flex-col"}>
+            <button onClick={() => setCurrentContent(1)}
+                    className={currentContent === 1 ? active : ""}>page1</button>
+            <button onClick={() => setCurrentContent(2)}
+                    className={currentContent === 2 ? active : ""}>page2</button>
+            <button onClick={() => setCurrentContent(3)}
+                    className={currentContent === 3 ? active : ""}>page3</button>
+            <button onClick={() => setCurrentContent(4)}
+                    className={currentContent === 4 ? active : ""}>page4</button>
+        </div>
+        {renderContent()}
+    </div>;
+}

src/app/a/b/page.tsx

@@ -0,0 +1,9 @@
+import {ContainerB} from "@/app/_components/xiaban/ContainerB";
+
+const page = () => {
+    return <div>
+        <ContainerB></ContainerB>
+    </div>
+}
+
+export default page;

src/app/a/page.tsx

@@ -1,55 +1,9 @@
-import {Card, CardClass} from "@/app/_components/Card";
+import {Toggle} from "@/app/_components/xiaban/Toggle";
 
-const cards:CardClass[] = [
-    {
-        img:"/images/img.png",
-        title:"开播的第三年",
-        name:"芋圆",
-        time:"2012-02-02",
-        likes:120
-    },
-    {
-        img:"/images/img.png",
-        title:"开播的第三年",
-        name:"芋圆",
-        time:"2012-02-02",
-        likes:130
-    },
-    {
-        img:"/images/img.png",
-        title:"开播的第三年",
-        name:"芋圆",
-        time:"2012-02-02",
-        likes:140
-    },
-    {
-        img:"/images/img.png",
-        title:"开播的第三年",
-        name:"芋圆",
-        time:"2012-02-02",
-        likes:150
-    },
-    {
-        img:"/images/img.png",
-        title:"开播的第三年",
-        name:"芋圆",
-        time:"2012-02-02",
-        likes:160
-    },
-]
 const Page = () => {
 
-    return <div className={"space-y-10px"}>
-        {cards.map((item,index)=> (
-            <Card
-                time = {item.time}
-                img = {item.img}
-                title = {item.title}
-                likes={item.likes}
-                name = {item.name}
-                key={index}
-            />
-        ))}
+    return <div>
+        <Toggle></Toggle>
     </div>
 }