如何获得活动链接以使用 Next.js 中的动态子路径

Question

I am using next/router to check for the current pathname and then conditionally rendering an active className.

Here is what I am doing:

import { useRouter } from 'next/router';

const router = useRouter();

{
  navigation.map((item) => (
    <Link href={item.href}>
      <a
        key={item.name}
        className={classNames(
          router.pathname === item.href
            ? 'text-purple-700'
            : 'text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white',
          'px-3 py-2 text-base font-medium',
        )}
        aria-current={item.current ? 'page' : undefined}
      >
        {item.name}
      </a>
    </Link>
  ));
}

The issue is I'm also trying to display the active className for dynamic sub routes. For example /item.href/{id}, so it could be /blog/1.

Is it possible to achieve this?

Answer 1

It is possible, you can get the id from router params with

const {id} = router.query

then your matching condition to check the route

router.pathname === item.href.replace('[id]', id)