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

Question

使用 NextJS，我尝试使用具有 to 和 as 字段的对象路由到另一个页面:

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);

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

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 将被解码，因此您将获得 + .如果查询 params 对象进入 query ，则不会发生这种情况。如果您有任何依赖于此的逻辑，请考虑这一点。