☰

クエリ文字列からパラメータ値を取得するにはどうすればいいですか? 質問する

tag-icon • tag-icon reactjs react-router
クエリ文字列からパラメータ値を取得するにはどうすればいいですか? 質問する

__firebase_request_keyTwitter のサーバーからリダイレクトされた後に Twitter のシングル サインオン プロセスによって生成された URL からパラメーター値を取得するために、routes.jsx ファイルでルートを定義するにはどうすればよいでしょうか?

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>

ベストアンサー1

React Router v6、フックの使用

react-router-dom v6には、新しいフックがあります。検索パラメータを使用する. だから

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.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使用する必要があります。ルーター付きルーターが提供するプロパティのいずれかにアクセスします。

リアクトルーター v3

React Routerはすでに位置情報を解析し、それをルートコンポーネントプロパティとして。クエリ（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)

いずれにしても役に立ちます。

おすすめ記事