129

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

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

4

9 に答える 9

59

古い (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/sindresorhus/query-string

于 2016-01-26T01:15:06.373 に答える
17

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}

于 2016-06-23T02:08:58.087 に答える
14 
"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'); //
于 2019-08-29T19:09:42.610 に答える
4

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

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

location タイプを使用する 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>);
    }
});

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

于 2016-04-14T20:59:52.430 に答える