如何在 NextJS 中向 Router.push 添加查询参数？

Question

使用 NextJS，我尝试使用具有toandas字段的对象路由到另一个页面：

export const routes = {
  'BrowseList' : {
    'to' : '/apps/Browse/list',
    'as' : '/browse/list'
  }
  // ....
}

然后像这样导入和使用：

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

// .... 

const { to, as } = routes.BrowseList;

Router.push(to, as);

这一切都有效。我的困境是我试图在附加查询参数时做类似的事情。我正在尝试根据文档遵循此示例：

Router.push({
  pathname: '/about',
  query: { name: 'Zeit' },
})

我尝试过的（不起作用）：

Router.push({
  pathname : to,
  as,
  query    : { user_id: this.props.data.member.user.id },
});

这给了我一个控制台警告

Unknown key passed via urlObject into url.format: as

我知道我也许可以只使用字符串插值并执行以下操作：

Router.push(to, `${as}?user_id=`${this.props.data.member.user.id}`)

但我想知道文档示例中是否有我遗漏的东西，它还将查询参数添加到我的as值中。

谢谢你。

Answer 1

你很亲近@nyphur。该as值作为push的第二个参数，而不是在对应的对象内部to（检查router.d.ts以了解push是如何定义的）。这就是您收到错误的原因Unknown key passed via urlObject into url.format: as。从您的问题提出 10 个月后，也许这对寻找答案的人仍然有用。假设您有一种方法可以as按照@Gezim 的回答或任何其他方法为参数构建查询字符串：

Router.push({ pathname: to, query: { user_id: this.props.data.member.user.id } }, as, options);

注意：根据@Gezim 的回答，如果您格式化字符串或pathname在第一个参数中包含您的查询参数，它将起作用但编码值（如果有），%2B例如将被解码，因此您将获得+. 如果查询参数对象进入 inside ，则不会发生这种情况query。如果您有任何依赖于此的逻辑，请考虑这一点。