NextJS 13.4,useRouter()不工作|路径名未定义[重复]

9fkzdhlc  于 2023-06-22  发布在  其他
关注(0)|答案(1)|浏览(150)

此问题已在此处有答案

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;

这段代码适用于除我之外的所有人:(

hwamh0ep

hwamh0ep1#

usePathname钩子

截至Nextjs 13,大多数API都有变化,包括路由器API。
现在要获取pathName,您需要使用'next/navigation'中的usePathname,如doc所示:
usePathname是一个客户端组件钩子,它允许您读取当前URL的路径名。

'use client'      

import { usePathname } from 'next/navigation' 
 
export default function ExampleClientComponent() {      
  const pathname = usePathname()      
  return <>Current pathname: {pathname}</>
}

旁边

这也适用于访问搜索参数,2个新的API useSearchParamsuseParams

相关问题