使用 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
值中的内容。谢谢你。
最佳答案
你很亲近@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
,则不会发生这种情况。如果您有任何依赖于此的逻辑,请考虑这一点。
关于reactjs - 如何在 NextJS 中向 Router.push 添加查询参数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58306983/