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个月后，对于寻求答案的人来说，这可能仍然有用。假设您有一种方法，可以在@Gezim答案之后或通过任何其他方法来为as参数构建查询字符串：

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

注意：：基于@Gezim答案，如果您在第一个参数中设置字符串或pathname的格式以包含查询参数，它将使用BUT编码值（如果有），例如%2B将会被解码，因此您将得到+。如果查询参数对象位于query内，则不会发生这种情况。如果您有任何依赖于此的逻辑，请考虑一下。

Answer 2

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

我使用LinkCreator方法创建了一个名为toQuery的实用程序类，如下所示。它使用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');

如何在NextJs的Router.push中添加查询参数？

2 个答案: