NextRouter 未安装 Next.JS

Question

使用import { useRouter } from "next/router";asimport { useRouter } from "next/navigation";会抛出“'{ pathname: string; query: { search: string; }; }' 类型的参数不可分配给 'string' 类型的参数。”

    const router = useRouter();
    const [searchInput, setSearchInput] = useState("");

    const search = (e) => {
                router.push({
                    pathname: '/search',
                    query: {
                        search: searchInput,
                    },
                })
    }

NextJS文档

Froms 文档：“组件在 Next.js 应用程序之外使用了 useRouter，或者在 Next.js 应用程序之外呈现。在对使用 useRouter 挂钩的组件进行单元测试时可能会发生这种情况，因为它们没有配置 Next.js 的上下文”。

Answer 1

从页面目录迁移：

• 新的 useRouter 钩子应该从 next/navigation 而不是 next/router 导入
• 路径名字符串已被删除并替换为usePathname()
• 查询对象已被删除并被 router.events 取代。useSearchParams() 当前不支持。

这是解决方案：https://beta.nextjs.org/docs/api-reference/use-router

Answer 2

NEXT.js 13更改了 useRouter 的包。

'use client';

import { useRouter } from 'next/navigation';

export default function Page() {
  const router = useRouter();

  return (
    <button type="button" onClick={() => router.push('/dashboard')}>
      Dashboard
    </button>
  );
}

Answer 3

import { useRouter } from "next/router";

这在页面目录页面中仍然有效

• 应用程序目录 客户端

  'use client';
  
   // this works in pages directory as well
   import { useRouter } from 'next/navigation';
  

如果您 import { useRouter } from "next/router"在此目录中使用，您会收到“错误：NextRouter 未安装”

Answer 4

对于下一个 13 版本：

'use client';

import { useRouter } from 'next/navigation';

//对于以前的版本：

'use client';

import { useRouter } from 'next/router';

Answer 5

你不知道我在最简单的任务上花费了多少时间，比如获取我的 url 文件（应用程序目录）的动态部分watch/[videoId]/page.tsx。

useRouter会给我：

• 使用Navigation代替（同构）
• useRouter 未安装（使用"use client";）

useNavigation没有有关查询/动态路径/路径的信息。

usePathname感觉很搞笑，然后我必须自己分割路径（我一直在这样做，直到我明白如何正确地做到这一点。

useSearchParams为空：

• getAll() 需要一个名称参数，这在我看来完全没有意义，我只想要全部。
• get(名称) 返回 NULL

不过很高兴 .split()'ing

\/\/3 LL co /\/\ e到血腥的边缘...

Answer 6

正如其他人指出的那样，现在是：

import { usePathname } from 'next/navigation';

const pathname = usePathname();

在这里阅读更多内容