繁体   English   中英

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

[英]How do I add a query param to Router.push in NextJS?

使用 NextJS,我正在尝试使用具有toas字段的 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值中。

谢谢你。

你很接近@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中,则不会发生这种情况。 如果您有任何依赖于此的逻辑,请考虑这一点。

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

我会利用 object 传播来做到这一点,这也不会改变任何东西。 这将从Router.BrowseList引入toas属性,同时允许您将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"
  }
})
①如果本文未解决您的问题,请点击查看与本文相关的问题
②如果本文未解决您的问题,请向程序员专用AI小助手提问
暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM