他のページからReactアプリに遷移してきたときに、URLのクエリ文字列にパラメタを指定し、そのパラメタの値に応じて見せ方を変えたい場合があります。そんなときはreact-routerとquery-stringを使うと便利です。以下ではどんな感じに使うかを簡単に説明します。
デモ用にこんなディレクトリを作ります：
react-router-demo/
├── index.html
└── app.jsx
index.htmlは単にReactアプリのマウントポイントです。
<!DOCTYPE html>
<html>
<head>
<title>react-router demo</title>
</head>
<body>
<!-- Reactアプリのマウントポイント !-->
<div id="mount"></div>
<script src="./app.js"></script>
</body>
</html>
下がapp.jsxの内容です。
ポイントはクエリ文字列を受け取りたいコンポーネントを<Router> と<Route>でかこむことです。
これによりprops.location.searchにクエリ文字列が格納されるので、コンポーネントに渡すことが出来ます。ただし、このままでは?query1=FirstQuery&query2=SecondQueryのように、クエリ文字列が処理されていない状態なので、queryStringを使ってパースしています。
import React, {Component} from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route} from "react-router-dom";
import queryString from 'query-string';
class App extends Component {
render () {
const qs = this.props.qs;
return (
<div>
<a href='?query1=FirstQuery&query2=SecondQuery'>parse url query parameters</a>
<ul>
<li>query1: <strong>{qs.query1}</strong></li>
<li>query2: <strong>{qs.query2}</strong></li>
</ul>
</div>
);
}
}
ReactDOM.render(
<Router>
<Route render={ (props) =>
<App
qs={queryString.parse(props.location.search)}
/>
}/>
</Router>,
document.getElementById("mount"));
parcelを使ってビルドしページにアクセスすると、クエリ文字列を受け取れていることが確認出来ます。
$ parcel build -d ./ -o app ./app.jsx
$ python -m SimpleHTTPServer
