私のプロジェクトではreact-router-dom 4.0.0-beta.6を使っています。 以下のようなコードがあります:
<Route exact path="/home" component={HomePage}/>
HomePageコンポーネントでクエリパラメータを取得したい。 このような
location.searchパラメータを見つけました:?key=value
のように見えるので、パースされていません。
react-router v4でクエリパラメータを取得する正しい方法は?
クエリー文字列を解析する機能はV4から削除されたが、これは長年にわたって異なる実装をサポートしたいという要望があったからだ。そのため、その実装がどのようなものであるかは、ユーザーが決めるのがベストであるとチームは判断した。クエリー文字列ライブラリをインポートすることをお勧めします。これは私が使っているものです
const queryString = require('query-string');
const parsed = queryString.parse(props.location.search);
ネイティブなものが必要で、それがあなたのニーズに合うなら、 new URLSearchParams
を使うこともできます。
const params = new URLSearchParams(props.location.search);
const foo = params.get('foo'); // bar
この決定についての詳細はこちらを参照してください。
この回答はうまくいくが、追加パッケージをインストールしたくない場合は、これを使うことができる:
getUrlParameter = (name) => {
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
let regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
let results = regex.exec(window.location.search);
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
};
与えられた http://www.google.co.in/?key=value
getUrlParameter('key');
は value
を返します。
react router v4用のparamsについて調べていたのですが、react router v2/3とは違い、v4では使われていませんでした。もしかしたら誰かが役に立つかもしれないので、別の関数を残しておこう。必要なのはes6か素のjavascriptだけです。
function parseQueryParams(query) {
//You get a '?key=asdfghjkl1234567890&val=123&val2&val3=other'
const queryArray = query.split('?')[1].split('&');
let queryParams = {};
for (let i = 0; i < queryArray.length; i++) {
const [key, val] = queryArray[i].split('=');
queryParams[key] = val ? val : true;
}
/* queryParams =
{
key:"asdfghjkl1234567890",
val:"123",
val2:true,
val3:"other"
}
*/
return queryParams;
}
また、この関数は改善することができます
これを作成したばかりなので、下位バージョンからルーターv4以上に応答するように更新する場合、コード構造全体(reduxルーターストアからのクエリを使用)を変更する必要はありません。