时间戳

首页 > 解决方案 > Next.js：导航到新路线时更新导航栏组件

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

问题描述

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

当前：导航栏重音有延迟更新。它更新到上次访问的页面。例如：如果我从第 1 页开始，然后单击第 2 页，则重音一直在第 1 页上，直到我再次单击第 2 页。如果我然后单击 page3，page2 现在将具有重音。

尝试：我正在使用next.routerinuseEffect尝试更新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.jspage2 & page3 是相似的。

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

标签： reactjsnext.js

解决方案

放下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>
   );
}

推荐阅读