Next.js动态路径浅路由操作导致basePath丢失问题咨询

这个问题其实是因为你使用router.push时只传入了查询参数字符串，Next.js在处理这种相对路径的浅路由时，没有正确带上配置的basePath。下面给你两种可行的解决方案：

方案一：利用router.asPath构建完整URL #

router.asPath会返回浏览器地址栏中显示的完整路径（已经包含了basePath），我们可以基于它来拼接新的查询参数：

import { useRouter } from 'next/router';

// 在组件内部
const router = useRouter();

const handleShallowRoute = () => {
  // 判断当前路径是否已有查询参数，决定用&还是?拼接
  const querySeparator = router.asPath.includes('?') ? '&' : '?';
  const newUrl = `${router.asPath}${querySeparator}page=2`;
  router.push(newUrl, undefined, { shallow: true });
};

这种方法的好处是不需要手动拼接动态路由参数和basePath，完全基于当前显示的路径来更新，避免出错。

方案二：手动拼接包含basePath的完整路径 #

如果你更倾向于手动控制路径，可以直接从配置或环境变量中获取basePath，结合当前的动态路由参数构建完整URL：

import { useRouter } from 'next/router';

// 在组件内部
const router = useRouter();
const { name, brandid } = router.query;
// 假设你的basePath在next.config.js中配置为'/my-base-path'，或者从环境变量获取
const basePath = process.env.NEXT_PUBLIC_BASE_PATH; // 记得在next.config.js中暴露这个环境变量

const handleShallowRoute = () => {
  const newUrl = `${basePath}/${name}/${brandid}?page=2`;
  router.push(newUrl, undefined, { shallow: true });
};

为什么原来的写法会丢失basePath？ #

当你只传入"?page=2"作为router.push的第一个参数时，Next.js会将其视为相对于当前内部路由路径的查询参数更新（内部路径是不包含basePath的，比如/[name]/[brandid]）。而浅路由模式下，它不会重新解析basePath并拼接到URL中，导致浏览器地址栏里的basePath被移除。

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