web-dev-qa-db-ja.com

React routerを使用してオプションのクエリパラメータでルートを設定するにはどうすればよいですか？

私は次のような道を持っています

 <Route path="/account/:accountid/LoginPage"
      component={LoginPage}/>

URLが-> /account/12332/LoginPageの場合、これは正常に機能します。オプションのクエリパラメータが必要です。 URL構造は次のようになります

/account/12322/LoginPage?User=A&User=B

パスを次のように変更しました

<Route path="/account/:accountid/LoginPage(/:User)"
      component={LoginPage}/>

この後、URLにアクセスしようとすると、適切なページにリダイレクトされず、代わりに次のようなエラーがスローされます。

useBasename.js:56 Uncaught TypeError: history.getCurrentLocation is not a function
    at Object.getCurrentLocation (useBasename.js:56)
    at Object.getCurrentLocation (useQueries.js:64)
    at Object.listen (createTransitionManager.js:246)
    at Object.componentWillMount (Router.js:97)
    at ReactCompositeComponent.js:347
    at measureLifeCyclePerf (ReactCompositeComponent.js:75)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:346)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:257)
    at Object.mountComponent (ReactReconciler.js:45)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:370)
reactjsreact-routerquery-parameters
6
Geeky

React-router v4（最新バージョン）の時点では、クエリパラメーター（？user = nerve＆name = no-one）をサポートしていません。ただし、URLパラメータはサポートしています。 GitHubの問題 同じ点について議論しています。先に進んでそれを読んでください。いくつかの良い解決策がありますが、コアライブラリに直接組み込まれているものはありません。

私が通常実装する回避策は、同じコンポーネントをレンダリングする複数のルートを追加することです。

<Route exact path='/' component={ HomePageConnector } />
<Route exact path='/search/:searchTerm' component={ HomePageConnector } />

編集

私が理解しているように、v4の唯一の問題は、location.queryオブジェクトが公開されなくなったことです。ただし、location.search（これはSTRINGであり、オブジェクトではありません）には引き続きアクセスできます。この文字列を読み取り、 query-string のようなライブラリに渡して、より意味のあるオブジェクトを取得できます。このようにして、URLパラメータではなくクエリパラメータを引き続き使用できます。この情報はすでにGitHubの問題に書かれていますが、コメント全体に少し散らばっています。次のようなもの（テストされていませんが）：

ルート：

<Route exact path='/test' component={HomePageConnector} />

コンポーネント内のパラメータの取得：

const parseQueryString = require('query-string');

let queryString = this.props.location.search;
let queryParams = parseQueryString.parse(queryString);
11
Nerve