navbar에 액티브 된 상태에 스타일을 주고 싶어서 응용하고 있는데요, 에러도 안뜨고 문제가 없는 것 같은데 실행이 안되어요.
혹시 코드를 봐주실 수 있을까요??? 혹시 다른 방법이 있을까요?? 공식 문서에 나온대로 따라해봤는데도 잘 안되네요;;
https://nextjs.org/docs/pages/api-reference/functions/use-router#routerevents
'use client'
import { useRouter } from 'next/navigation'
import Link from 'next/link'
export default function Header() {
const menuData = [
{ id: 'menu01', name: '마이 블로그', path: '/list' },
{ id: 'menu02', name: '글쓰기', path: '/write' },
]
const router = useRouter()
return (
<header className='header'>
<div className='inner'>
<h1 className='logo'>
<Link href="/">blogful</Link>
</h1>
<nav className="nav-list">
{
menuData.map((menu) => {
return (
<Link className="nav-item" href={menu.path} style={{color: router.pathname === menu.path ? 'red : 'black'}}>{menu.name}</Link> // 이 부분입니다.
)
})
}
</nav>
</div>
</header>
)
}
답변주시면 감사하겠습니다!
