如何在 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"
  }
})