私が使用していますrouter.push次のコードを使用して、私のURLを更新するには：
data = {url: 'abc', id: 1234}
this.props.router.push(
path: 'app/p/1',
query: {search: data}
)
ただし、これによりクエリは次のように設定されます?search=%5Bobject+Object%5D。
jQuery paramを使用してネストされたオブジェクトをクエリに変換しようとしましたが、reactrouterはクエリを通常の文字列として解析します
data = {url: 'abc', id: 1234};
search = $.param({search: data});
this.props.router.push(
path: 'app/p/1',
query: search
)
これにより、クエリは次のように設定されます。
0=s&1=e&10=i&11=t&12=e&13=_&14=u&15=r&16=l&17=%25&18=5&19=D&2=a&20=%3D&21=a&22=b&23=c&24=d&3=r&4=c&5=h&6=%25&7=5&8=B&9=s
編集
データの値は動的に生成され、固定されていません。これは常にキーと値のペアになります。
編集2
ここで使用されているフィルター機能を複製したいと思います。すべてのフィルターはqオブジェクト内に実装されています。たとえば、ユーザー名の検索は次のようになります。q[username]=abcd
クエリを次のように設定したいと思います：search[url]=abc&search[id]=123これはsearch%5Burl%5D=abc&search%5Bid%5D=123、URLの観点から：を意味します。
これはどのように達成できますか？
まず、react-routerv3のドキュメントを参照して質問に答えます。
react-router使用しているバージョンはわかりませんが、と同じである必要がv2ありますv4
https://github.com/ReactTraining/react-router/tree/v3.0.5/docs
router#push方法：またはをrouter#push使用して確認できます。stringlocation descriptor
これlocation descriptorは、オブジェクトを使用するQuery場合、オブジェクトを使用します。
したがって、location descriptorオブジェクトを使用する場合、メソッドは次のようになります。
let data = { url: 'abc', id: 1234 };
this.props.router.push({
path: 'app/p/1',
query: data
});
カスタム文字列を渡したい場合（役立つ場合があります）search、を受け取る、を使用する必要がありますQueryString。
react-router クエリオブジェクトがkey：valueとして渡されることを期待していますが、ネストのケースを処理できないと思います。
あなたはqsそれを処理するために素晴らしいモジュールを使うことができます：
const qs = require('qs');
let data = { url: 'abc', id: 1234 };
let query = qs.stringify({ search: data }); // produces: 'search%5Burl%5D=abc&search%5Bid%5D=1234'
this.props.router.push({
path: 'app/p/1',
search: query
});
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加