1. ホーム
  2. javascript

[解決済み] 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');