web-dev-qa-db-ja.com

クエリ文字列からパラメータ値を取得する方法

自分のサーバーからのリダイレクト後にTwitterのシングルサインオンプロセスによって生成されたURLから__firebase_request_keyパラメータ値を取得するために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>
reactjsreact-router
226
Franco

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を使うと報告されています。

React Router v4

React Router v4はこれ以上クエリを解析しませんが、アクセスできるのはthis.props.location.searchのみです。理由は nbeuchatの答え を見てください。

例えば。 query-string libraryをqsとしてインポートすることで可能です

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

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

一般

nizam.spの提案

console.log(this.props)

いずれにせよ役に立つでしょう。

303
Christian

React Router v4

componentを使用する 

<Route path="/users/:id" component={UserPage}/> 


this.props.match.params.id

コンポーネントはルートプロップで自動的にレンダリングされます。


renderを使用する 

<Route path="/users/:id" render={(props) => <UserPage {...props} />}/> 


this.props.match.params.id

ルートプロップはレンダリング関数に渡されます。

110
spencer.sm

React Router v4

React Router v4では、this.props.location.queryはもう存在しません。代わりにthis.props.location.searchを使用し、自分で、または query-string などの既存のパッケージを使用してクエリパラメータを解析する必要があります。

例

これはReact Router v4とquery-stringライブラリを使った最小限の例です。

import { withRouter } from 'react-router-dom';
import queryString from 'query-string';

class ActivateAccount extends Component{
    someFunction(){
        let params = queryString.parse(this.props.location.search)
        ...
    }
    ...
}
export default withRouter(ActivateAccount);

有理数

queryプロパティを削除するためのReact Routerのチーム合理的な説明は以下のとおりです。

クエリ文字列の解析/文字列化をわずかに異なる方法で行う一般的なパッケージがいくつかあります。これらの違いは、一部のユーザーにとっては "正しい"方法であり、他のユーザーにとっては "正しくない"方法です。 React Routerが「正しい」ものを選んだ場合、それは一部の人々にとってだけ正しいでしょう。それから、他のユーザーが自分の好みのクエリ解析パッケージを代用する方法を追加する必要があります。 React Routerが内部的に検索文字列を使用してキーと値のペアを解析する必要はないため、どちらを「正しい」にするかを選択する必要はありません。

[...]

4.0で採用されているアプローチは、すべての「電池を含む」種類の機能を取り除き、基本的なルーティングだけに戻ることです。クエリ文字列の解析、非同期ロード、Reduxの統合、その他非常に特殊なものが必要な場合は、ユースケース専用のライブラリを使用してそれを追加できます。あなたが必要としないという点で、それほど巧妙ではありませんが、あなたはあなたの特定の好みやニーズに合わせてものをカスタマイズすることができます。

あなたは GitHub で完全な議論を見つけることができます。

60
nbeuchat

React Router v4は props.location.query object を持たなくなりました（ github の説明を参照）。それで、受け入れられた答えはより新しいプロジェクトのために働かないでしょう。

V4の解決策は、外部ライブラリ query-string を使用してprops.location.searchを解析することです。

const qs = require('query-string');
//or
import * as qs from 'query-string';

console.log(location.search);
//=> '?foo=bar'

const parsed = qs.parse(location.search);
console.log(parsed);
//=> {foo: 'bar'}
56
JTG

react-router をチェックすることができます、簡単に言えば、あなたのルーターで定義されている限り、クエリパラメータを取得するためのコードを使うことができます。

this.props.params.userId
23
TommyLike

React Router v4 

const urlParams = new URLSearchParams(this.props.location.search)
const key = urlParams.get('__firebase_request_key')

現在は実験的なものです。 

ここでブラウザの互換性をチェックしてください： https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/URLSearchParams#Browser_compatibility

15
Mike Frenil L

あなたのルーターがこのようなものであれば

<Route exact path="/category/:id" component={ProductList}/>

あなたはこのようなIDを得るでしょう

this.props.match.params.id
14
Milan Panigrahi

私の知る限りでは、3つの方法があります。

1.クエリ文字列を取得するために正規表現を使用します。

2.ブラウザのapi。画像を使用できます。現在のURLは次のようになります。

http://www.google.com.au?token=123

123を取得したいだけです。

最初 

 const query = new URLSearchParams(this.props.location.search);

それから

const token = query.get('token')
console.log(token)//123

3. 'query-string'という3番目のライブラリを使用します。最初にインストールします

npm i query-string

それを現在のjavascriptファイルにインポートします。

 import queryString from 'query-string'

次のステップは、現在のURLに 'token'を入れることです。次のようにします。

const value=queryString.parse(this.props.location.search);
const token=value.token;
console.log('token',token)//123

それが役に立てば幸い。

25/02/2019に更新

  1. 現在のURLが次のようになっているとします。

http://www.google.com.au?app=home&act=article&aid=160990

パラメータを取得するための関数を定義します。

function getQueryVariable(variable)
{
        var query = window.location.search.substring(1);
        console.log(query)//"app=article&act=news_content&aid=160990"
        var vars = query.split("&");
        console.log(vars) //[ 'app=article', 'act=news_content', 'aid=160990' ]
        for (var i=0;i<vars.length;i++) {
                    var pair = vars[i].split("=");
                    console.log(pair)//[ 'app', 'article' ][ 'act', 'news_content' ][ 'aid', '160990' ] 
        if(pair[0] == variable){return pair[1];}
         }
         return(false);
}

私たちは「援助」を受けることができます：

getQueryVariable('aid') //160990
10
MING WU

v4以降のReact routerでは、locationオブジェクトに直接query paramsを指定することはなくなりました。その理由は

クエリ文字列の構文解析/文字列化をわずかに異なる方法で行う一般的なパッケージが多数あります。これらの各の違いは、一部のユーザーにとっては "正しい"方法であり、 ] ほかの人のため。もしReact Routerが "正しい"ものを選んだとしたら、それは何人かの人々にとっては正しいでしょう。それから、他のユーザーが自分の好みのクエリ解析パッケージを代用する方法を追加する必要があります。 React Routerが検索文字列を内部的に使用してキーと値のペアを解析することを要求することはないため、どの検索値を選択する必要はありません。これらのうち「正しい」はずです。

それを含めて、クエリオブジェクトを期待しているビューコンポーネントのlocation.searchを単に解析する方が理にかなっているでしょう。

react-routerのwithRouterを上書きすることでこれを一般的に行うことができます。

customWithRouter.js

import { compose, withPropsOnChange } from 'recompose';
import { withRouter } from 'react-router';
import queryString from 'query-string';

const propsWithQuery = withPropsOnChange(
    ['location', 'match'],
    ({ location, match }) => {
        return {
            location: {
                ...location,
                query: queryString.parse(location.search)
            },
            match
        };
    }
);

export default compose(withRouter, propsWithQuery)
6
Shubham Khatri

私はこの問題を解決するのに苦労しました。上記のいずれでもうまくいかない場合は、代わりにこれを試すことができます。私はcreate-react-appを使っています 

要件

react-router-dom "：" ^ 4.3.1 "

解決策

ルータが指定されている場所

<Route path="some/path" ..../>

このように渡したいパラメータ名を追加します。

<Route path="some/path/:id" .../>

/ pathをレンダリングしているページでは、これを指定して、パラメータ名call idをこのように表示できます

componentDidMount(){
  console.log(this.props);
  console.log(this.props.match.params.id);
}

デフォルトをエクスポートした最後に 

export default withRouter(Component);

インポートを含めることを忘れないでください

import { withRouter } from 'react-router-dom'

Console.log（this.props）になると、渡された内容が可能になります。楽しむ！

5
NarDd

this.props...が他の答えに基づいて期待されていたのでなければ、withRouter（ docs v4 ）を使う必要があるかもしれません。

import React from 'react'
import PropTypes from 'prop-types'
import { withRouter } from 'react-router'

// A simple component that shows the pathname of the current location
class ShowTheLocation extends React.Component {
  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  }

  render() {
    const { match, location, history } = this.props

    return (
      <div>You are now at {location.pathname}</div>
    )
  }
}

// Create a new component that is "connected" (to borrow redux terminology) to the router.  
const TwitterSsoButton = withRouter(ShowTheLocation)  

// This gets around shouldComponentUpdate
withRouter(connect(...)(MyComponent))

// This does not
connect(...)(withRouter(MyComponent))
5
jtlindsey

this.props.params.your_param_nameは動作します。

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

5
nizam.sp

少し遅れるかもしれませんが、この反応フックはURLクエリで値を取得/設定するのに役立ちます： https://github.com/rudyhuynh/use-url-search-params （私が書いた）。

react-routerの有無にかかわらず動作します。以下はあなたの場合のコードサンプルです：

import React from "react";
import { useUrlSearchParams } from "use-url-search-params";

const MyComponent = () => {
  const [params, setParams] = useUrlSearchParams()
  return (
    <div>
      __firebase_request_key: {params.__firebase_request_key}
    </div>
  )
}
2
Ruby Ybur

あなたが使用できるパラメータにアクセスする必要があるコンポーネントで

this.props.location.state.from.search

クエリ文字列全体が表示されます（?記号の後のすべての文字列）。

2
Rocco Ghielmini
componentDidMount(){
    //http://localhost:3000/service/anas
    //<Route path="/service/:serviceName" component={Service} />
    const {params} =this.props.match;
    this.setState({ 
        title: params.serviceName ,
        content: data.Content
    })
}
1
Anas Alpure

React Router v4ではwithRouteのみが正しい方法です

履歴オブジェクトのプロパティと最も近いものへのアクセスは、withRouter高次コンポーネントを介して取得できます。 withRouterは、レンダリングされるたびに、更新された一致、場所、履歴の小道具をラップされたコンポーネントに渡します。

import React from 'react'
import PropTypes from 'prop-types'
import { withRouter } from 'react-router'

// A simple component that shows the pathname of the current location
class ShowTheLocation extends React.Component {
  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  }

  render() {
    const { match, location, history } = this.props

    return (
      <div>You are now at {location.pathname}</div>
    )
  }
}

// Create a new component that is "connected" (to borrow redux
// terminology) to the router.
const ShowTheLocationWithRouter = withRouter(ShowTheLocation)

https://reacttraining.com/react-router/web/api/withRouter

1
krystianj

私はそのようにurlパラメータを解析するためにquery-stringと呼ばれる外部パッケージを使いました。

import React, {Component} from 'react'
import { parse } from 'query-string';

resetPass() {
    const {password} = this.state;
    this.setState({fetching: true, error: undefined});
    const query = parse(location.search);
    return fetch(settings.urls.update_password, {
        method: 'POST',
        headers: {'Content-Type': 'application/json', 'Authorization': query.token},
        mode: 'cors',
        body: JSON.stringify({password})
    })
        .then(response=>response.json())
        .then(json=>{
            if (json.error)
                throw Error(json.error.message || 'Unknown fetch error');
            this.setState({fetching: false, error: undefined, changePassword: true});
        })
        .catch(error=>this.setState({fetching: false, error: error.message}));
}
0
Joe
let data = new FormData();
data.append('file', values.file);
0
fatemeh kazemi zadeh virus3000

あなたが使用してクエリを見ることができます：

console.log(this.props.location.query)
0
smartworld-dm