web-dev-qa-db-ja.com

NextJSでrouter.pushにクエリパラメータを追加するにはどうすればよいですか。

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}`)
 _

しかし、私はDocの例で行方不明のものがあったかどうか疑問に思っていましたが、クエリパラメータも私のas値に追加されます。

ありがとうございました。

reactjsnext.js
3
nyphur

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');
_
1
Gezim