reactjs - Next.js:导航到新路线时更新导航栏组件

Question

目标:当页面导航到时更新导航栏重音

当前:导航栏重音更新延迟。它会更新到上次访问的页面。例如:如果我从 page1 开始，然后单击 page2，则重音将保留在 page1 上，直到我再次单击 page2。如果我单击第 3 页，第 2 页现在将带有重音符号。

尝试:我正在 useEffect 中使用 next.router 来尝试更新 router 更改时的重音>.

代码:app.js

import "tailwindcss/tailwind.css";
import Layout from "../components/Layout";

function MyApp({ Component, pageProps }) {
    return (
        <Layout>
            <Component {...pageProps} />
        </Layout>
    );
}

export default MyApp;

layout.js

import Navbar from "./Navbar";

export default function Layout({ children }) {
    return (
        <div className="layout">
            <Navbar />
            <div className="">{children}</div>
        </div>
    );
}

navbar.js

 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect } from "react";

 function classNames(...classes) {
   return classes.filter(Boolean).join(" ");
 }

 const navigation = [
   { name: "page1", href: "/", current: true },
   { name: "page2", href: "/page2", current: false },
   { name: "page3", href: "/page3", current: false },
 ];

 export default function Navbar() {
   const router = useRouter();
   useEffect(
     (e) => {
       navigation.map((item) => {
         if (router.route == item.href) {
           item.current = true;
         } else {
           item.current = false;
         }
       });
       console.log(router.route);
     },
     [router]
   );

   return (
     <div>
       <div>
         {navigation.map((item) => (
           <Link href={item.href} key={item.name}>
             <a
               className={classNames(
                 item.current
                   ? "border-indigo-500 text-gray-900"
                   : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700",
                 "inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
               )}
               aria-current={item.current ? "page" : undefined}
             >
               {item.name}
             </a>
           </Link>
         ))}
       </div>
     </div>
    );
  }

index.js page2 和 page3 类似。

export default function Home() {
    return (
        <div className="flex flex-col items-center justify-center min-h-screen py-2">
            Hello
        </div>
    );
}

Answer 1

删除useEffect并直接使用

import Link from "next/link";
import { useRouter } from "next/router";

function classNames(...classes) {
  return classes.filter(Boolean).join(" ");
}

const navigation = [
   { name: "page1", href: "/" },
   { name: "page2", href: "/page2" },
   { name: "page3", href: "/page3" },
];

export default function Navbar() {
   const router = useRouter();

   return (
     <div>
       <div>
         {navigation.map((item) => (
           <Link href={item.href} key={item.name}>
             <a
               className={classNames("inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium", router.route === item.href ? "border-indigo-500 text-gray-900" : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700")}
               aria-current={router.route === item.href ? "page" : undefined}
             >
               {item.name}
             </a>
           </Link>
         ))}
       </div>
     </div>
   );
}