繁体   English   中英

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

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

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

使用 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值中。

谢谢你。

3 个回复

你很接近@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"
  }
})
1 将对象传递给 Router.push NextJs 上的查询

我是 NextJs 新手,我试图通过组件将对象传递到另一个页面。 我将发布代码并更好地解释我试图做的事情: 对象是这样的: 这是主要组件:我试图在 Router.push 中传递对象 这是我试图在查询中接收对象的页面 然后在上面的页面上,我尝试访问对象,例如: 这并不像我想象的那样 ...

2 NextJS 查询只能通过参数字符串访问,而不是通过 Router.push - 选项

我遇到的问题是关于将参数从一页传递到另一页。 我有两个组成部分:注册和成功。 在我的注册组件中,如果用户成功注册,他将被重定向到成功组件。 根据他是否未成年,将在成功组件上呈现附加信息。 我的注册组件中的相关部分: Success 组件中的相关部分: 和 这确实有效,但将 Parameter 作为 ...

3 NextJS Router.push 解码

我正在尝试使用 router.push 进行重定向以传递 queryString 但是当我尝试使用特殊字符在参数中传递一个值时,因为逗号正在编码我的 url,是否可以使用路由器.push? 我已经尝试了很多东西,但我不知道如何让它发挥作用。 生成的 url 将是myurl?pets=cats%2Cd ...

4 NextJS 如何让 router.push 不是浅路由

我有一个搜索页面,当用户搜索某些东西时,例如椅子,它将使用router.push("/search-page/" + searchQuery);推送到路由/search-page/chairs ; 但是,出现的一个问题是,当用户在搜索页面内进行另一次搜索时,地址栏中 URL 中的查询会更新,但页面不 ...

5 NextJS router.push 奇怪的链接

https://imgur.com/a/Zc7FE5f 当我尝试在登录后重定向到主页(或在尝试访问没有令牌的页面后重定向到登录)时,这个 url 变得很奇怪。 如何防止这种情况并在 url 中有正常路径? ...

6 NextJS - 带有页面道具的 Router.push

在我的 React 应用程序中,我使用import Router from 'next/router'移动到另一个页面: Router.push('/form') 。 但是在我有 function 组件的form上: 我希望能够将一些道具传递给它(这些道具已经收集在第一页/从我指向的地方。 这怎么 ...

暂无
暂无

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

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