此问题已在此处有答案:
How to get the current pathname in the app directory of Next.js 13?(1个答案)
8天前关闭
我正试图使一个积极的联系和改变风格下划线时,它的活动。我正在使用'next/navigation'中的useRouter()
,因为从'next/router'导入useRouter时出错。但我的链接仍然不起作用。
下面是我的代码:
import React from 'react';
import Image from 'next/image';
import hamburgerMenu from '../../public/Assets/hamburger-menu.svg';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
function HamburgerMenu({ isModalOpen, handleModal }) {
const { pathname } = useRouter();
return (
<>
{isModalOpen && <></>}
<button onClick={handleModal}>
<Image src={hamburgerMenu} width={20} height={14} />
</button>
{isModalOpen && (
<div className='absolute top-16 left-[50%] translate-x-[-50%]'>
<ul>
<li>
<Link href='/' className={pathname == '/' ? 'underline' : ''}>
Home
</Link>
</li>
<li>
<Link
href='/about'
className={pathname == '/about' ? 'underline' : ''}>
About
</Link>
</li>
</ul>
</div>
)}
</>
);
}
export default HamburgerMenu;
这段代码适用于除我之外的所有人:(
1条答案
按热度按时间hwamh0ep1#
usePathname
钩子截至Nextjs 13,大多数API都有变化,包括路由器API。
现在要获取
pathName
,您需要使用'next/navigation'
中的usePathname
,如doc所示:usePathname
是一个客户端组件钩子,它允许您读取当前URL的路径名。旁边
这也适用于访问搜索参数,2个新的API useSearchParams和useParams。