NextJS中如何给Router.push添加查询参数及自定义as路径？

你遇到的问题核心是对Router.push的参数结构理解有误——as并不是第一个urlObject参数的合法属性，它是Router.push的第二个独立参数，用来指定浏览器地址栏显示的URL，而第一个参数是用来匹配实际页面的路由配置。

正确的写法（符合官方API规范） #

你可以保留官方文档推荐的urlObject格式传递路由目标和查询参数，同时把带查询参数的显示URL作为第二个参数传递。为了避免手动拼接字符串的麻烦，推荐使用URLSearchParams来生成查询参数部分：

import { routes } from './__routes';
import Router from 'next/router';

// 获取自定义路由的to和as
const { to, as } = routes.BrowseList;
// 构造查询参数对象
const queryParams = { user_id: this.props.data.member.user.id };

Router.push(
  // 第一个参数：匹配实际页面的路由配置（包含pathname和query）
  {
    pathname: to,
    query: queryParams
  },
  // 第二个参数：浏览器地址栏显示的URL（as + 查询参数）
  `${as}?${new URLSearchParams(queryParams)}`
);

为什么之前的写法会报错？ #

官方定义的urlObject只接受pathname、query、hash这些属性，你把as放到第一个对象里，Next.js会识别为未知属性，因此抛出Unknown key passed via urlObject into url.format: as的警告。

额外说明 #

• 当你传递as参数时，必须确保它的查询参数和第一个urlObject里的query完全对应，这样Next.js才能正确处理路由匹配和参数传递。
• 使用URLSearchParams的好处是自动处理参数编码（比如特殊字符），比手动拼接字符串更安全可靠，尤其是在有多个查询参数的场景下。

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