Next.js UseRouter未挂载

lymgl2op 于 2023-05-17 发布在其他

关注(0)|答案(3)|浏览(291)

我正在使用Next.JS，我想通过一个蛞蝓到我的网站。
这是我的代码：

'use client';
import { useRouter } from 'next/router';

export default function Home() {
    const router = useRouter();
    const { slug } = router.query;

    return (
        <p>Post: {slug}</p>
    )
}

但是，在这样做时，我收到一个错误：未装载NextRouter。https://nextjs.org/docs/messages/next-router-not-mounted
我没有找到太多关于这个的文档，它唯一导致的是一个下一个路由器模拟包。但是我不知道这对我来说是否是正确的。
我尝试使用next/navigation，但似乎找不到任何与路由器相关的内容。我不知道还有什么别的选择。我是next.js的新手，所以如果这个问题看起来很明显，我很抱歉。
先谢谢你了。

next.js

来源：https://stackoverflow.com/questions/76239346/next-js-userouter-not-mounted

3条答案

按热度按时间

pbwdgjma1#

您不能将'next/router'中的路由器与新的应用程序路由器一起使用。在这种情况下，您必须使用来自'next/navigation'（https://nextjs.org/docs/app/api-reference/functions/use-router）的路由器。但是，该路由器没有query属性，因此您需要使用新的usePathname钩子（https://nextjs.org/docs/app/api-reference/functions/use-pathname）您的代码应该类似于：

'use client';
import { usePathname } from 'next/navigation';

export default function Home() {
    const pathname = usePathname();

    return (
        <p>Post: {pathname}</p>
    )
}

赞(0）回复(0）举报 2023-05-17

kwvwclae2#

好吧我想出来了。
UseParams就是我要找的https://nextjs.org/docs/app/api-reference/functions/use-params
谢谢你的回复：）

赞(0）回复(0）举报 2023-05-17

okxuctiv3#

它现在应该在params属性中：

export default function Home({params}) {
  const { slug } = params
}

赞(0）回复(0）举报 2023-05-17

我来回答

Next.js UseRouter未挂载

3条答案

相关问题

热门标签

最新问答