react-router 4がクエリパラメータでURLを更新しない

上位レベルのフィルタコンポーネントを使用して、クエリパラメータをURLに追加して、ユーザーがさまざまなタイプのフィルタとリンクを共有できるようにします。react-router 4がクエリパラメータでURLを更新しない

私はコンポーネントwithRouter()をエクスポートしていますが、すべてが正当だと思われます。コンポーネントのプロップに履歴が挿入されています。私はこのコードの一部を呼び出すときしかし：

this.props.history.push({ 
     pathname: this.props.history.location.pathname, 
     query: { tags: selectedTags } 
    });

それはthis.props.historyの状態を変更し、私は私のクエリは現在見ることができますが、ブラウザでURLは変更されません。私は何か間違っているのですか？

出典

2017-09-29 Xeperis

私は同じ状況に遭遇しました。私の解決策は、ブラウザのURLを変更することができるブラウザの履歴APIのpushState()メソッドを使用することです。ページの内容を変更するという点では、ReactのsetState()メソッドを使用します。あなたはそれが間違って使用している

出典

2017-09-29 09:43:20 movier

、あなたのコードは次のようになります。

this.props.history.push({ 
     pathname: this.props.history.location.pathname, 
     search: `?tags=${ selectedTags }` 
    });

あなたはナビゲーション詳細を読むことができます：https://github.com/ReactTraining/history#navigation

出典

2017-09-29 09:50:19 imcvampire

ああ、感謝を。しかし、なぜこれは以前の状態を表示していますか？ 'search：'？tags = $ {selectedTags} 'を押すとアクションが実行され、初めて表示されることはありません。 paramsが 'search：'？cars = $ {selectedTags} 'と言ってアクションを実行すると、urlは'？tags'だけを表示します。一つの状態遅れがあるようです。 – Xeperis

'selectedTags'にはどのような価値がありますか？ – imcvampire

私は問題を理解しました：2つのレビュックスアクションが同時に起動されました。そのうち1つは 'react-router'のロケーション変更でした。これは、インターネット上で曖昧に議論されている次の問題に私をもたらします。ルート変更を引き起こさずに 'search'文字列を変更することです。この背後にある理由は、多くの呼び出しを行うことが高価で、UXの点で応答がない、データマイニングWEB APPの一種の共有可能なリンクを構築するためです。 – Xeperis

react-router 4がクエリパラメータでURLを更新しない

答えて

関連する問題