NextRouter没有挂载Next.JS

Question

使用import { useRouter } from "next/router";作为import { useRouter } from "next/navigation";抛出“类型的参数”{路径名:字符串；查询：{搜索:字符串；}“不能分配给‘string’类型的参数。”

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

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

NextJS 文档

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

Answer 1

从页面目录迁移：

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

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

Answer 2

const router = useRouter();

const search = (e) => {
          const searchParams = {
                pathname: '/search',
                query: {
                    search: e.target.value,
              },
          } as any
           router.push(searchParams)
}

Answer 3

现在，Nextjs默认安装Next@13。如果您从Nextjs@12开始，最近重新安装了软件包，您必须删除Nextjs@12之后才能安装低于13的版本。我不知道为什么，但对我来说，这才是起作用的原因。

npm uninstall next

npm install next@12.2.0

注意事项：只需确保下一个版本低于13