[解決済み] react-routerのハッシュフラグメントからクエリパラメータを取得する
2022-07-11 07:57:46
質問
クライアント側のアプリケーションにreactとreact-routerを使用しています。以下のようなクエリパラメータをurlから取得する方法がわからないようです。
http://xmen.database/search#/?status=APPROVED&page=1&limit=20
私のルートはこんな感じです(パスが全然違うのは承知の上です)。
var routes = (
<Route>
<DefaultRoute handler={SearchDisplay}/>
<Route name="search" path="?status=:status&page=:page&limit=:limit" handler={SearchDisplay}/>
<Route name="xmen" path="candidate/:accountId" handler={XmenDisplay}/>
</Route>
);
ルートは正常に動作していますが、欲しいパラメータを取得するためにパスをどのようにフォーマットすればよいのかがわかりません。この件に関してどんな助けでも感謝します!
どのように解決するのですか?
注:コメントからのコピー/ペースト。元の投稿を気に入ってください。
es6で書いていて、react 0.14.6 / react-router 2.0.0-rc5を使用しています。私はこのコマンドを使って、コンポーネントのクエリパラメータを検索しています。
this.props.location.query
urlに含まれる利用可能なすべてのクエリパラメータのハッシュを作成します。
更新します。
React-Router v4 については
この回答
. 基本的には
this.props.location.search
でクエリ文字列を取得し、パースする際に
query-string
パッケージで解析するか
URLSearchParams
:
const params = new URLSearchParams(paramsString);
const tags = params.get('tags');
関連
-
[解決済み] react-router go back a page how do you configure history?
-
[解決済み] React RouterでDefaultRouteを別のRouteに設定する方法
-
[解決済み] Reactルータを使ったプログラムによるナビゲーション
-
[解決済み] React-routerのURLを更新したり、手動で書き込んだりするとうまくいかない
-
[解決済み] クエリ文字列からパラメータ値を取得する方法は?
-
[解決済み] React Router v4で履歴にプッシュする方法は?
-
[解決済み】オプションのパスパラメータを持つReact Router
-
[解決済み] selectタグのngModelの変更を検出する方法(Angular 2)?
-
[解決済み] 料金制限のあるAPIを独自にDogfoodする
-
[解決済み] jQuery ui ダイアログのロードコールバック後にタイトルを変更する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] クエリ文字列からパラメータ値を取得する方法は?
-
[解決済み] ジェスト あるクラスの特定のメソッドをモックする方法
-
[解決済み] 配列からオブジェクトを生成する
-
[解決済み] Angularjs - 現在の日付を表示する
-
[解決済み] モバイルWeb HTML5フレームワークの選び方【終了しました
-
[解決済み] URL/アドレスバーからJavascriptの関数を呼び出す
-
[解決済み] なぜ "use strict "はパフォーマンスを10倍向上させるのか?
-
[解決済み] JavaScriptを使用してHTML要素に属性を追加/更新するには?
-
[解決済み] JavaScriptで:hoverのCSSプロパティを変更する
-
[解決済み] JavaScriptのswitch文で厳密な比較を仮定するのは安全ですか?