Next.js使用useRouter带参跳转时触发url.startsWith不是函数错误

• 核心原因是你使用的Next.js版本路由模式和useRouter的导入、调用方式不匹配：
  1. 如果你使用的是Next.js 13+的App Router（页面存放在app目录下）：
     • App Router提供的useRouter从next/navigation导入，router.push方法仅接收字符串类型的路由地址，你传入对象格式参数时，方法内部尝试调用字符串的startsWith方法就会抛出类型错误。
     • 另外App Router默认所有组件是服务端组件，useRouter是客户端钩子，未在文件顶部添加'use client'指令也会引发异常。
  2. 如果你使用的是Next.js Pages Router（页面存放在pages目录下）：
     • 需要确认是否错误导入了App Router的useRouter，或者未在客户端组件中调用该钩子。

场景1：使用Pages Router #

你的原有对象传参写法本身是支持的，仅需补充客户端标识即可（纯Pages Router项目不需要加use client，Next.js13+混合模式需要）：

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

export default function Index() {
  const router = useRouter()

  const handleClick = () => {
    router.push({
      pathname: '/appointment/success',
      query: {
        data: '12321',
      },
    })
  }

  return <button onClick={handleClick}>点击跳转</button>
}

跳转后的页面可以通过router.query.data直接获取传递的参数。

场景2：使用App Router #

需要手动拼接查询参数，写法如下：

'use client' // 必须添加，标识为客户端组件
import { useRouter } from 'next/navigation'

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

  const handleClick = () => {
    // 拼接查询参数
    const query = new URLSearchParams({ data: '12321' }).toString()
    router.push(`/appointment/success?${query}`)
  }

  return <button onClick={handleClick}>点击跳转</button>
}

跳转后的页面可以通过useSearchParams钩子获取参数：

'use client'
import { useSearchParams } from 'next/navigation'

export default function SuccessPage() {
  const searchParams = useSearchParams()
  const data = searchParams.get('data') // 可拿到传递的参数值12321
  return <div>接收参数：{data}</div>
}

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