小能豆

NextRouter 未安装 Next.JS

javascript

使用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 的上下文。”


阅读 59

收藏
2024-06-06

共1个答案

小能豆

看到的错误消息表明 Next.js 中钩子的类型推断存在问题。useRouter似乎useRouter中的钩子"next/navigation"与 中的钩子具有不同的类型签名"next/router",并且 TypeScript 无法推断路由器对象的正确类型。

要修复此问题,您应该确保从正确的位置导入useRouter,即"next/router"。以下是更正后的导入语句:

import { useRouter } from "next/router";

useRouter一旦从导入"next/router",TypeScript 应该能够正确推断路由器对象的类型,并且错误应该得到解决。

2024-06-06