如何添加 active class 鏈接到當前頁面和語言環境？

Question

我有一個子標題菜單，我想在其中將活動 class 添加到活動頁面。 問題是當我更改語言環境時。 如果我的鏈接看起來像： my-site/my-page - 它有效，但如果我的鏈接： my-site/fr/my-page - 無效。 另外，使用 Storyblok 無頭 CMS。

import { Box, HStack, Link, LinkProps, List, ListItem } from "@chakra-ui/react";
import NextLink from "next/link";
import React from "react";


type SubHeaderLinkProps = {
  name: string;
  href: string;
  isActive: boolean;
};
const activeLinkStyles: LinkProps = {
  color: "orange.400",
  borderBottom: "1px solid",
  borderColor: "orange.400",
};

const inActiveLinkStyles: LinkProps = { color: "white" };
const SubHeaderLink: React.VFC<SubHeaderLinkProps> = ({
  name,
  href,
  isActive,
}) => (
  
  <ListItem _last={{ base: { pr: 8 }, lg: { pr: 0 } }}>
    <NextLink href={href} passHref>
      <Link
        sx={isActive ? activeLinkStyles : inActiveLinkStyles}
        py={5}
        w="min-content"
        d="block"
        whiteSpace="nowrap"
     >
        {href}
      </Link>
    </NextLink>
  </ListItem>
);

此外，在我使用SubHeaderLink組件的地方添加了另一個代碼文件。

import {
  SubHeaderLink,
  SubHeaderLinks,
} from "@/components/layout/subHeader/SubHeader";
import { ReactStoryblokComponent, StoryblokLink } from "@/types/storyblok";
import { useRouter } from "next/router";
import { useStoryblokLinkParser } from "storyblok/useStoryblokLinkParser";

type Blok = {
  subHeaderLinks: { _uid: string; linkName: string; href: StoryblokLink }[];
};

const StoryblokSubHeader: ReactStoryblokComponent<Blok> = ({
  blok: { subHeaderLinks },
}) => {
  const { asPath } = useRouter();
  const { getHref } = useStoryblokLinkParser();

  return (
    <SubHeaderLinks>
      {subHeaderLinks.map(({ _uid, href, linkName }) => (
        <SubHeaderLink
          key={_uid}
          href={getHref(href)}
          name={linkName}
          isActive={asPath === getHref(href)}
        />
      ))}
    </SubHeaderLinks>
  );
};

export default StoryblokSubHeader;

Answer 1

asPath屬性包含沒有locale值的當前路徑。 來自router object文檔：

asPath : String - 在沒有配置的basePath或locale的情況下在瀏覽器中顯示的路徑（包括查詢）。

假設getHref(href)返回一個包含語言環境的路徑，您還需要將它與asPath與語言環境進行比較。

const StoryblokSubHeader: ReactStoryblokComponent<Blok> = ({ blok: { subHeaderLinks } }) => {
    const { asPath, locale, defaultLocale } = useRouter(); // Get the current locale
    const { getHref } = useStoryblokLinkParser();

    const getCurrentPath = () => {
        if (locale === defaultLocale) return asPath

        return `/${locale}${asPath}`
    }

    return (
        <SubHeaderLinks>
            {subHeaderLinks.map(({ _uid, href, linkName }) => (
                <SubHeaderLink
                    key={_uid}
                    href={getHref(href)}
                    name={linkName}
                    isActive={getCurrentPath() === getHref(href)}
                />
            ))}
        </SubHeaderLinks>
    );
};