Next.js问题：NextRouter未挂载及useRouter参数类型错误

1. 「NextRouter was not mounted」错误 #

• 触发场景：在Next.js应用外部使用或渲染依赖useRouter的组件时会触发，比如单元测试未配置Next.js路由上下文。
• 解决方法：
  • 单元测试中需为组件提供路由上下文：
    • 若用Pages Router，通过jest.mock模拟next/router：

      jest.mock('next/router', () => ({
        useRouter: () => ({
          push: jest.fn(),
          // 按需添加其他路由方法
        }),
      }));
      

    • 若用App Router，用Next.js测试工具包裹组件：

      import { render } from '@testing-library/react';
      import { RouterProvider, createRouter } from 'next/router';
      import YourComponent from './YourComponent';
      
      test('组件渲染无路由错误', () => {
        const router = createRouter([
          {
            path: '/',
            element: <YourComponent />,
          },
        ]);
      
        render(<RouterProvider router={router} />);
      });
      

2. 导入路径变更后router.push参数报错 #

• 问题描述：将import { useRouter } from "next/router";改为import { useRouter } from "next/navigation";后，传入含pathname和query的对象参数时，抛出类型错误：Argument of type '{ pathname: string; query: { search: string; }; }' is not assignable to parameter of type 'string'.
• 原因：App Router的useRouter（来自next/navigation）的push方法不支持Pages Router中{ pathname, query }的对象格式，仅接受字符串路径或URL实例。
• 解决方法：手动构造带查询参数的完整路径：
  方法一：模板字符串拼接

  const router = useRouter();
  const [searchInput, setSearchInput] = useState("");
  
  const search = (e) => {
    e.preventDefault();
    router.push(`/search?search=${encodeURIComponent(searchInput)}`);
  }
  

  方法二：使用URLSearchParams

  const router = useRouter();
  const [searchInput, setSearchInput] = useState("");
  
  const search = (e) => {
    e.preventDefault();
    const params = new URLSearchParams({ search: searchInput });
    router.push(`/search?${params.toString()}`);
  }
  

补充：原next/router的router.push可自动解析pathname和query生成路径，但App Router的路由逻辑更贴近原生浏览器导航，需手动构造完整路径。

内容的提问来源于stack exchange，提问作者thewb