Next.js浅路由未按预期工作：动态路由下Query参数修改异常

架构老林

2026-7-25

问题原因分析

你遇到的问题根源在于router.push的参数写法错误：

直接传入&price=sdds作为目标路径时，Next.js会基于路由模板（而非当前实际URL）解析路径，导致动态路由的占位符[category]等被直接带到最终URL里。
同时，因为解析后的路径和当前实际路由不匹配（动态部分从具体值变成了占位符），浅路由（shallow: true）失效，触发了页面刷新。

解决方案

要实现动态路由下的浅路由修改Query参数，需要基于当前实际URL路径来构造目标地址，确保动态参数部分和当前一致。以下是两种可靠的实现方式：

方式一：利用URL对象处理（推荐）

通过浏览器原生URL对象解析当前页面URL，修改Query参数后再推送：

import { useRouter } from 'next/router';

const router = useRouter();

const addPriceQuery = () => {
  // 解析当前页面完整URL
  const currentUrl = new URL(window.location.href);
  // 添加或更新price参数
  currentUrl.searchParams.set('price', '333');
  // 推送修改后的路径和Query，启用浅路由
  router.push(currentUrl.pathname + currentUrl.search, undefined, { shallow: true });
};

方式二：基于router.asPath构造路径

router.asPath会返回当前页面的实际路径（包含动态参数值和已有Query），可以直接基于它拼接新参数：

import { useRouter } from 'next/router';

const router = useRouter();

const addPriceQuery = () => {
  // 拆分路径和已有Query部分
  const [path, existingQuery] = router.asPath.split('?');
  // 拼接新的Query字符串
  const newQueryStr = existingQuery 
    ? `${existingQuery}&price=333` 
    : 'price=333';
  // 推送完整路径，启用浅路由
  router.push(`${path}?${newQueryStr}`, undefined, { shallow: true });
};

关键注意点