Javascript 如何添加活动类以链接到当前页面和语言环境

我有一个副标题菜单，我想在其中添加一个活动类的活动页面.问题是当我改变地点时.

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;