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

Question

使用 NextJS，我正在尝试使用具有to和as字段的 object 路由到另一个页面：

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的第二个参数，而不是在对应的 object 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将被解码，因此您将获得+ 。 如果查询参数 object go 在query中，则不会发生这种情况。 如果您有任何依赖于此的逻辑，请考虑这一点。

Answer 2

next.js 中的路由器似乎没有任何方便的 API 来使用查询字符串导航到。

我使用toQuery方法创建了一个名为LinkCreator的实用程序 class，如下所示。 它使用query-string来创建查询字符串：

import * as qs from 'query-string';
export class LinkCreator {
    static query(object) {
        return qs.stringify(object);
    }
    static toQuery(object, path = "/") {
        const query = this.query(object);
        return path + '?' + query;
    }
}

然后，它可以像这样与Router.push一起使用：

Router.push(LinkCreator.toQuery({ name: 'Zeit' }), '/about');

Answer 3

我会利用 object 传播来做到这一点，这也不会改变任何东西。 这将从Router.BrowseList引入to和as属性，同时允许您将query属性添加到将调用Router.push的结果 object 中。

我也会冻结Routes object 以让您安心。

import Router from 'next/router';

export const Routes = Object.freeze({
  BrowseList: {
    to: '/apps/Browse/list',
    as: '/browse/list'
  }
  // ....
})

Router.push({
  ...Routes.BrowseList,
  query: {
    paramName: "Param value here"
  }
})