web-dev-qa-db-ja.com

react-routerハッシュフラグからクエリアパラメータを取得する

私はクライアント側の私のアプリケーションのためにreactとreact-routerを使用しています。次のようなURLから次のクエリパラメータを取得する方法を理解できないようです。

http://xmen.database/search#/?status=APPROVED&page=1&limit=20

私の路線はこのようになっています（私の知る限りでは、この経路はまったく間違っています）。

var routes = (
<Route>
    <DefaultRoute handler={SearchDisplay}/>
    <Route name="search" path="?status=:status&page=:page&limit=:limit" handler={SearchDisplay}/>
    <Route name="xmen" path="candidate/:accountId" handler={XmenDisplay}/>
</Route>
);

私のルートはうまく機能していますが、必要なパラメータを取得するためにパスをフォーマットする方法がわからないだけです。これに関するどんな助けでも感謝します！

javascriptreactjsclient-sidereact-routerclient-side-scripting
96
Christopher Robin

注：コメントからコピー/貼り付けしてください。元の記事が好きであることを忘れないでください！

Es6で書いてreact 0.14.6/react-router 2.0.0-rc5を使ってください。私はこのコマンドを使って私のコンポーネントの中のクエリパラメータを検索します。

this.props.location.query

これは、URL内のすべての利用可能なクエリパラメータのハッシュを作成します。

更新：

React-Router v4については、 この答え を参照してください。基本的に、クエリ文字列を取得するにはthis.props.location.searchを使用し、query-stringパッケージまたは RLSearchParams - で解析します

const params = new URLSearchParams(paramsString); 
const tags = params.get('tags');`
119
Duncan Finney

OLD（v4より前）：

Es6で書いてreact 0.14.6/react-router 2.0.0-rc5を使ってください。私はこのコマンドを使って私のコンポーネントの中のクエリパラメータを検索します。

this.props.location.query

これは、URL内のすべての利用可能なクエリパラメータのハッシュを作成します。

アップデート（React Router v4 +）：

react Router 4のthis.props.location.queryは削除されました（現在v4.1.1を使用しています）。この問題の詳細については、 https://github.com/ReactTraining/react-router/をご覧ください。 issue/4410

現在、このライブラリを使用してギャップを埋めるために、クエリのパラメータを解析するために独自の方法を使用したいようです。 https://github.com/sindresorhus/query-string

57
Marrs

上記の答えはreact-router v4では機能しません。これが私が問題を解決するためにしたことです -

最初--- query-string をインストールします。これは解析に必要になります。

npm install -save query-string

これでルーティングされたコンポーネントでは、次のように未解析のクエリ文字列にアクセスできます。

this.props.location.search

コンソールにログインしてクロスチェックすることができます。

最後にクエリパラメータにアクセスするためのパース

const queryString = require('query-string');
var parsed = queryString.parse(this.props.location.search);
console.log(parsed.param); // replace param with your own

クエリが?hello=worldのようなものであれば

console.log(parsed.hello)はworldを記録します

41
hashcode55

更新2017.12.25

"react-router-dom": "^4.2.2"

uRL好き

BrowserHistory：http://localhost:3000/demo-7/detail/2?sort=name

HashHistory：http://localhost:3000/demo-7/#/detail/2?sort=name

query-string 依存関係を持つ場合：

this.id = props.match.params.id;
this.searchObj = queryString.parse(props.location.search);
this.from = props.location.state.from;

console.log(this.id, this.searchObj, this.from);

結果：

2 {sort: "name"} home

"react-router": "^2.4.1"

http://localhost:8080/react-router01/1?name=novaline&age=26のようなURL

const queryParams = this.props.location.query;

queryParamsはクエリパラメータを含むオブジェクトです：{name: novaline, age: 26}

15
slideshowp2

Stringqueryパッケージの場合：

import qs from "stringquery";

const obj = qs("?status=APPROVED&page=1limit=20");  
// > { limit: "10", page:"1", status:"APPROVED" }

Query-stringパッケージの場合

import qs from "query-string";
const obj = qs.parse(this.props.location.search);
console.log(obj.param); // { limit: "10", page:"1", status:"APPROVED" }

パッケージなし：

const convertToObject = (url) => {
  const arr = url.slice(1).split(/&|=/); // remove the "?", "&" and "="
  let params = {};

  for(let i = 0; i < arr.length; i += 2){
    const key = arr[i], value = arr[i + 1];
    params[key] = value ; // build the object = { limit: "10", page:"1", status:"APPROVED" }
  }
  return params;
};


const uri = this.props.location.search; // "?status=APPROVED&page=1&limit=20"

const obj = convertToObject(uri);

console.log(obj); // { limit: "10", page:"1", status:"APPROVED" }


// obj.status
// obj.page
// obj.limit

それが役立つことを願っています:)

ハッピーコーディング！

7
EsterlingAccime Youtuber

他の答えを読んだ後（まず@ duncan-finney、そして次に@Marrs）、私はこれを解決する慣用のreact-router 2.xの方法を説明する変更ログを見つけることを始めました。コンポーネント内の locationの使用に関するドキュメント （クエリに必要です）は、実際のコードとは矛盾しています。あなたが彼らのアドバイスに従うなら、あなたはこのような大きな怒りの警告を受けるでしょう：

Warning: [react-router] `context.location` is deprecated, please use a route component's `props.location` instead.

場所の種類を使用するlocationという名前のコンテキストプロパティを持つことはできません。ただし、場所の種類を使用するlocという名前のコンテキストプロパティを使用できます。したがって、解決策は以下のように彼らの情報源を少し修正したものです。

const RouteComponent = React.createClass({
    childContextTypes: {
        loc: PropTypes.location
    },

    getChildContext() {
        return { location: this.props.location }
    }
});

const ChildComponent = React.createClass({
    contextTypes: {
        loc: PropTypes.location
    },
    render() {
        console.log(this.context.loc);
        return(<div>this.context.loc.query</div>);
    }
});

あなたはあなたの子供に欲しい位置オブジェクトの部分だけを渡すことも同じ利益を得ることができます。警告をオブジェクトタイプに変更するように変更しませんでした。それが役立つことを願っています。

4
Adam McCormick
"react-router-dom": "^5.0.0",

次のようなURLアドレスを持つコンポーネントにモジュールを追加する必要はありません。

http：// localhost：3000 /＃/？authority '

次の簡単なコードを試すことができます：

    const search =this.props.location.search;
    const params = new URLSearchParams(search);
    const authority = params.get('authority'); //
2
meisam nazari

単純なjsソリューション：

queryStringParse = function(string) {
    let parsed = {}
    if(string != '') {
        string = string.substring(string.indexOf('?')+1)
        let p1 = string.split('&')
        p1.map(function(value) {
            let params = value.split('=')
            parsed[params[0]] = params[1]
        });
    }
    return parsed
}

そして、あなたはどこを使ってでもそれを呼び出すことができます：

var params = this.queryStringParse(this.props.location.search);

お役に立てれば。

1
Vijesh Chandera

query-string moduleを使用すると、最適化されたプロダクションビルドを作成するときに次のエラーが発生する可能性があります。

このファイルからコードを縮小できませんでした：./node_modules/query-string/index.js:8

これを克服するには、ビルドの実行中に問題なく同じプロセスを実行する stringquery という代替モジュールをご利用ください。

import querySearch from "stringquery";

var query = querySearch(this.props.location.search);
0
Balasubramani M