クエリストリングからパラメータ値を取得する方法

routes.jsxファイルで、Twitter'single sign onプロセスで生成されたURLから__firebase_request_keyパラメータ値をキャプチャするルートを定義するにはどうすればいいですか？

http://localhost:8000/#/signin?_k=v9ifuf&__firebase_request_key=blablabla

以下のようなroutesの設定で試してみましたが、:redirectParamでは言及されたパラメータをキャッチできません。

<Router>
  <Route path="/" component={Main}>
    <Route path="signin" component={SignIn}>
      <Route path=":redirectParam" component={TwitterSsoButton} />
    </Route>
  </Route>
</Router>
Uwe Keim
編集された質問 27日 5月 2018 в 6:37
プログラミング
reactjs react-router
12日 2月 2016 в 12:19
20 ビュー
ソリューション

React Router v3。

React Routerはすでにロケーションを解析し、それをpropsとしてRouteComponentに渡してくれます。クエリ(URLの?の後)の部分には、以下の方法でアクセスできます。

this.props.location.query.__firebase_request_key

ルータ内でコロン(:)で区切られたパスパラメータの値を探している場合は、以下の方法でアクセスできます。

this.props.match.params.redirectParam

これはReact Router v3の後期バージョンに適用されます（どのバージョンかはわかりません）。古いバージョンのルーターでは、this.props.params.redirectParamを使用することが報告されています。

React Router v4およびReact Router v5。

React Router v4では、クエリの解析は行われず、this.props.location.searchを介してのみアクセスできるようになりました。理由はnbuchat's answerを参照してください。

例えば、[query-string][3] ライブラリを qs としてインポートすると、以下のようになります。

qs.parse(this.props.location.search, { ignoreQueryPrefix: true }).__firebase_request_key

検索文字列の解析については、この回答を参照してください。

さらに、コンポーネントが Switch の直接の子でない場合、ルーターが提供するプロップにアクセスするには withRouter を使用する必要があります。

**一般的な例

nizam.sp'の提案する方法

console.log(this.props)

は、どんな場合でも役に立ちます。

[3]： https://github.com/sindresorhus/query-string

Christian
編集した答え 14日 5月 2019 в 1:03
解説 (11)

react-router]1を参照してください。簡単に言うと、ルーターで定義されている限り、コードを使ってクエリパラメータを取得することができます。

this.props.params.userId
解説 (1)

this.props.params.your_param_name`で動作します。

これは、クエリ文字列からパラメターを取得する方法です。 あらゆる可能性を探るために、console.log(this.props);を行ってください。

解説 (0)