[解決済み] クエリ文字列からパラメータ値を取得する方法は？

質問

routes.jsxファイルにルートを定義して __firebase_request_key Twitterのシングルサインオン処理で、サーバーからリダイレクトされた後に生成されたURLから、パラメータ値を取得することはできますか？

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

以下のようなルート構成で試しましたが :redirectParam は、指定されたパラメータをキャッチしません。

<Router>
  <Route path="/" component={Main}>
    <Route path="signin" component={SignIn}>
      <Route path=":redirectParam" component={TwitterSsoButton} />
    </Route>
  </Route>
</Router>

解決方法は？

React Router v6、フックを使用する。

react-router-dom v6では、新しいフックである useSearchParams . そのため

const [searchParams, setSearchParams] = useSearchParams();
searchParams.get("__firebase_request_key")

を取得します。 "blablabla" . searchParamsはURLSearchParamsのインスタンスで、Object.fromEntriesなどのイテレータも実装していることに注意しましょう。

React Router v4/v5、フックなし、汎用品

React Router v4 はもうクエリをパースしませんが、クエリにアクセスするには this.props.location.search (または useLocation, 下記参照)。理由としては nbeuchatさんの回答 .

例 qs としてインポートされたライブラリは qs を実行することができます。

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

別のライブラリは クエリ文字列 . 参照 この回答 には、検索文字列のパースに関するいくつかのアイデアがあります。もし IE対応 を使用することもできます。

new URLSearchParams(this.props.location.search).get("__firebase_request_key")

機能コンポーネントの場合、次のように置き換えます。 this.props.location をフックとする 使用場所 . 注：この場合 window.location.search しかし、これでは変更時にReactのレンダリングをトリガーすることができません。 もし、あなたの（非機能的な）コンポーネントが、直接の子として Switch を使用する必要があります。 withRouter を使用して、ルータが提供する任意のプロップにアクセスできます。

React Router v3

React Routerはすでにあなたのために場所を解析し、それをあなたの RouteComponent をプロップスとして使用します。クエリ部分（URLの ? の後ろ）には、以下の方法でアクセスできます。

this.props.location.query.__firebase_request_key

ルーター内のコロン（:）で区切られたパスパラメーター値を探している場合、これらは

this.props.match.params.redirectParam

React Router v3 の後期バージョン（どれかは不明）に適用されます。古いバージョンのルーターでは this.props.params.redirectParam .

一般

nizam.spさんからのご提案

console.log(this.props)

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