我目前正在使用Next.js开发一个应用程序，并使用官方Next.js文档中的多根布局（https：//nextjs.org/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts）。因为我需要为每条路线单独设置样式。
然而，在实现多个根布局后，我遇到了一个问题，活动链接的颜色没有按预期变化，即使它在变化前工作得很好。
抱歉，因为我是初学者，关于next.js最新版本的信息不多
下面是我处理活动链接颜色的相关代码：

import { useState } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";

const Sidebar = () => {
    const [isMobileMenuVisible, setIsMobileMenuVisible] = useState(false);
    const pathname = usePathname();

    const isActive = (href) => {
        if (pathname.startsWith(href)) {
            return "text-[#909090]";
        }
        return "";
    };

    const toggleMobileMenu = () => {
        setIsMobileMenuVisible(!isMobileMenuVisible);
    };

    return (
         DACHI-GIORGI GARUCHAVA
         {/* Mobile dropdown menu */}
         <button
            className="text-[#484848] no-underline cursor-pointer font-MPlus1 leading-6 font-thin tracking-wider mb-2"
            onClick={toggleMobileMenu}
            Menu
            {isMobileMenuVisible && (
                The Witness
               {/* Add other links here */}
            )}
           {/* Desktop link list */}
           Invasive Modification
           {/* Add other links here */}
       );
};

export default Sidebar;

字符串
的
isActive函数检查
路径名来确定链接是否处于活动状态，并相应地应用特定的文本颜色。在我开始使用多个根布局之前，这种逻辑工作得很好，我需要单独设置路由的样式。
任何帮助将不胜感激