你使用的是nextjs，这意味着第一次渲染将发生在服务器上，而不是浏览器上，所以位置和其他浏览器特定的全局变量，如（window，localStorge）将为null，修复方法是让你的代码在浏览器上运行，以便将你的代码 Package 在useEffect中

useEffect(() => {
    for (let i = 0; i \< navigation.length; i++) {
        if (navigation\[i\].href === location.pathname) {
            navigation\[i\].current = true;
        }
    }   
}, [])

NextJs13
如果你想突出显示活动的导航项，使用如下自定义组件：

'use client';

/*
  NavLink: The "active" class is added when the href matches the start of the URL pathname,
  use the "exact" property to change it to an exact match with the whole URL pathname.
  https://github.com/dstroot/nextjs-13-example/blob/master/components/NavBar/navlink.tsx
*/

import Link, { LinkProps } from 'next/link';
import { usePathname } from 'next/navigation';
import { FC, HTMLProps, RefAttributes } from 'react';
import cn from 'classnames';

export type NavLinkProps = {
  exact?: boolean;
  children?: React.ReactNode;
} & LinkProps &
  HTMLProps<HTMLAnchorElement> &
  RefAttributes<HTMLAnchorElement>;

export const NavLink: FC<NavLinkProps> = ({ exact, children, className, ...props }) => {
  const pathname = usePathname();
  const isActive = exact ? pathname === props.href : pathname?.startsWith(props.href);

  return (
    <Link className={cn(className, { ['link-active']: isActive })} {...props}>
      {children}
    </Link>
  );
};