Next.js页面内导航：带查询参数的锚点跳转问题求助

你遇到的这个问题我之前也踩过坑！核心原因是没搞对Next.js Router里hash锚点的正确配置方式，之前的写法要么把#当成路径的一部分被编码，要么参数传递的位置不对，导致锚点失效。

错误写法的问题分析 #

• 第一种写法router.push({ pathname: '/patient/details#identity' })：Next.js会把#identity当成pathname的一部分，自动URL编码成%23identity，自然丢失了锚点的作用。
• 第二种写法的问题在于，要么把hash和pathname混写，要么错误使用了第二个参数（旧版里的as参数，并非用来传递query的），导致路由解析出错，锚点也没被正确识别。

正确的实现方式 #

不管你用的是Pages Router还是Next.js 13+的App Router，都可以通过单独配置hash属性来解决，把pathname、query、hash分开定义：

Pages Router（使用next/router的useRouter）

import { useRouter } from 'next/router';

const router = useRouter();

// 正确的跳转写法
router.push({
  pathname: '/patient/details', // 仅写路径部分，不要带hash
  query: { 
    patientId: item.patientId,
    storeNbr: item.storeNbr 
  },
  hash: '#identity' // 单独指定锚点hash
});

App Router（使用next/navigation的useRouter）

import { useRouter } from 'next/navigation';

const router = useRouter();

router.push({
  pathname: '/patient/details',
  query: { 
    patientId: item.patientId,
    storeNbr: item.storeNbr 
  },
  hash: '#identity'
});

这样生成的路由会是：http://localhost:8081/patient/details?patientId=xxx&storeNbr=xxx#identity，既正确传递了查询参数，又能跳转到目标页面的#identity锚点位置。

备选方案：字符串拼接法 #

如果你偏好直接拼接字符串，也可以用URLSearchParams生成合法的查询参数，再拼接锚点：

const queryParams = new URLSearchParams({
  patientId: item.patientId,
  storeNbr: item.storeNbr
}).toString();

router.push(`/patient/details?${queryParams}#identity`);

这种方式也能达到同样效果，但用对象配置的方式更清晰，不容易出现编码错误。

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