クライアント側のアプリケーションで、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>
);

私のルートは正常に機能していますが、必要なパラメーターを取得するためにパスをフォーマットする方法がわかりません。これについての助けに感謝します！

注：コメントからコピー/貼り付けます。元の投稿を必ず気に入ってください！

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パッケージまたはURLSearchParamsで解析します。

const params = new URLSearchParams(paramsString); 
const tags = params.get('tags');

古い（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/issues/4410をご覧ください。

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

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

まず、解析に必要なクエリ文字列をインストールします。

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

アップデート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

クエリ文字列の依存関係：

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"

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

const queryParams = this.props.location.query;

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

stringqueryパッケージ：

import qs from "stringquery";

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

クエリ文字列パッケージの場合：

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

それが役に立てば幸い:)

幸せなコーディング！

"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'); //

他の回答を読んだ後（最初は@ duncan-finney、次に@Marrs）、私はこれを解決する慣用的なreact-router 2.xの方法を説明する変更ログを見つけることに着手しました。場所使用上のドキュメントのコンポーネントに（あなたは、クエリのために必要な）、実際に実際のコードと矛盾しています。したがって、彼らのアドバイスに従うと、次のような大きな怒りの警告が表示されます。

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

場所の種類を使用する場所と呼ばれるコンテキストプロパティを持つことはできません。ただし、場所タイプを使用する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>);
    }
});

子に必要な位置オブジェクトの部分のみを渡すことも、同じ利点を得ることができます。オブジェクトタイプに変更するという警告は変更されませんでした。お役に立てば幸いです。

単純な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);

お役に立てれば。

クエリ文字列モジュールを使用すると、最適化されたプロダクションビルドの作成中に次のエラーが発生する場合があります。

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

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

import querySearch from "stringquery";

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