Next.js 경로가 있는 활성 Navbar

활성 Navbar는 사용자가 about 페이지에 있을 때 about 링크가 navbar에서 강조 표시되어야 함을 의미합니다. 사용자가 다른 페이지에 있고 탐색 모음에서 해당 링크를 사용할 수 있는 경우 강조 표시되어야 합니다.

당신이 그것을 얻지 못한다면 다음은 내가 말하는 것과 그것이 어떻게 될지에 대한 데모입니다.

시사



위의 데모에서 볼 수 있듯이 사용자가 navbar 섹션 중 하나를 클릭하면 페이지 경로가 변경되고 활성 페이지 이름이 navbar에서 강조 표시됩니다. 그것이 우리가 만들 것입니다.

레이아웃 만들기

레이아웃이 없으면 먼저 레이아웃을 만들어야 합니다. Layout 구성 요소를 _app.js에 추가합니다.

// components/Layout.jsx

import Navbar from "./Navbar";

export default function Layout({ children }) {
    return (
        <>
            <Navbar />
            {children}
            {/* Footer */}
            {/* You can add more things here  */}
        </>
    );
}

위의 코드에서 Navbar를 가져온 다음 Navbar 내부에 Layout를 렌더링하고 있음을 알 수 있습니다.

이제 레이아웃을 만든 후 전체 앱을 레이아웃으로 래핑해야 합니다. 다음과 같아야 합니다.

// pages/_app.js

import "../styles/global.css";
import Layout from "./../components/Layout";

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

export default MyApp;

내비게이션 만들기

구성 요소 폴더에 파일 이름Navbar.jsx을 만듭니다. 먼저 현재 페이지 경로를 확인하는 데 필요하므로 Link 및 useRouter를 가져옵니다.

// components/Navbar.jsx

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

그런 다음 navbar에 표시하고 싶은 모든 경로를 정의해야 합니다.

// components/Navbar.jsx

const navigationRoutes = ["home", "about", "pricing", "contact"];

export default function Navbar() {
    const router = useRouter();
    return (
        <nav className="nav_container">
            {navigationRoutes.map((singleRoute) => {
                return (
                    <NavigationLink
                        key={singleRoute}
                        href={`/${singleRoute}`}
                        text={singleRoute}
                        router={router}
                    />
                );
            })}
        </nav>
    );
}

위의 코드에서 router를 정의한 다음 nav 컨테이너를 만듭니다. 그런 다음 매핑navigationRoutes을 수행하고 각 경로에 대해 잠시 후에 생성할 반환NavigationLink을 수행합니다.
*소품: *

href : 경로 링크

text : 탐색 모음에 표시될 텍스트

router : 현재 경로를 확인합니다.

// components/Navbar.jsx

function NavigationLink({ href, text, router }) {
    const isActive = router.asPath === (href === "/home" ? "/" : href);
    return (
        <Link href={href === "/home" ? "/" : href} passHref>
            <a
                href={href === "/home" ? "/" : href}
                className={`${isActive && "nav_item_active"} nav_item`}>
                {text}
            </a>
        </Link>
    );
}

전체 탐색 코드-

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

const navigationRoutes = ["home", "about", "pricing", "contact"];

export default function Navbar() {
    const router = useRouter();
    return (
        <nav className="nav_container">
            {navigationRoutes.map((singleRoute) => {
                return (
                    <NavigationLink
                        key={singleRoute}
                        href={`/${singleRoute}`}
                        text={singleRoute}
                        router={router}
                    />
                );
            })}
        </nav>
    );
}

function NavigationLink({ href, text, router }) {
    const isActive = router.asPath === (href === "/home" ? "/" : href);
    return (
        <Link href={href === "/home" ? "/" : href} passHref>
            <a
                href={href === "/home" ? "/" : href}
                className={`${isActive && "nav_item_active"} nav_item`}>
                <span>{text}</span>
            </a>
        </Link>
    );
}

여기에서 현재 라우터 경로가 href와 동일한지 확인한 다음 true에 대해 isActive를 반환하고 현재 경로가 활성 상태이면 nav_item_active 클래스를 적용합니다.

이것이 활성 탐색 모음을 만드는 데 필요한 전부이며 완벽하게 작동합니다. 다음 샌드박스에서 라이브 데모를 확인할 수 있습니다.

마무리

이 기사가 마음에 드셨다면 ❤️를 누르는 것을 잊지 마시고 나중에 사용할 수 있도록 북마크에 추가하세요. 질문이나 제안 사항이 있으면 주저하지 말고 삭제하십시오. 또 봐요.

저에게 커피를 사주시면 후원을 연장할 수 있습니다.😊👇


내 Newsletter