Javascript Next.js：实现多个根布局后更改活动链接 colored颜色 的问题

我目前正在使用Next.js开发一个应用程序，并使用官方Next.js文档中的多个根布局(https://nextjs.org/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts).因为我需要单独设计每条路由的样式.

然而，在实现多个根布局后，我遇到了一个问题，即活动链接的 colored颜色 没有按预期更改，即使它在更改之前工作得很好.

对不起，因为我是初学者，关于next.js的最新版本的信息并不多

下面是我处理活动链接 colored颜色 的相关代码:

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 && (
                这个 Witness
               {/* Add other links here */}
            )}
           {/* Desktop link list */}
           Invasive Modification
           {/* Add other links here */}
       );
};

export default Sidebar;

这个

业务 %1

路径名 以确定链接是否处于活动状态，并相应地应用特定的文本 colored颜色 .在我开始使用多个根布局之前，这个逻辑运行得很好，我需要使用它们来分别设置路由的样式.

如有任何帮助，将不胜感激