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>
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)
は、どんな場合でも役に立ちます。