React.jsでルーティングします。

#はじめに
今回はReactでルーティングをします。
`react-router`を使う方法と`react-router-dom`を使う方法を書きます。
プロジェクトは`create-react-app`で作成しました。

#react-routerでルーティング
`react-route`を使う方法ですが、最新のバージョンでやると`browserHistoryがないよ！`って怒られて面倒臭かったので、バージョンを一個下げてv3でやることにしました。
では、やっていきます。
##インストールします
@マークの後ろでバージョンを指定してインストールします。

```bash
yarn add react-router@3
```

##ルーティングします
ここでは`index.js`でルーティングしていきます。
あらかじめ`Subapp1.js`、`Subapp2.js`、`Home.js`を作っておきました。それぞれの中身は`render()`でページ名を出すだけです。
では`index.js`をいじっていきます。

```js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Subapp1 from './Subapp1';
import Subapp2 from './Subapp2';
import Home from './Home';
import registerServiceWorker from './registerServiceWorker';
import { Router, Route, browserHistory } from 'react-router';

ReactDOM.render(　<Router history={browserHistory}>
        <Route path="/" component={Home} />
        <Route path="/app" component={App} />
        <Route path="/subapp1" component={Subapp1} />
        <Route path="/subapp2" component={Subapp2} />
    </Router>, document.getElementById('root'));
registerServiceWorker();
```

これでルーティングできました。
では、`yarn start`します。

アドレスバーで`http://localhost:3000/`だと`Home`が表示され、`http://localhost:3000/app`などと指定することで任意のページが開きます。

#react-router-domでルーティング
[ここ](https://github.com/ReactTraining/react-router)の[examples](https://github.com/ReactTraining/react-router/tree/master/website/modules/examples)に例がたくさん載ってるので、基本コピペで行けそうです。

##インストール
さっきと同様、インストールです。これはバージョンは気にしなくて良さそうです。

```bash
yarn add react-router-dom
```
##ルーティングします
さっきは`index.js`に書きましたが、今回は`App.js`に書いてます。先程と同様に`Subapp1.js`、`Subapp2.js`、`Home.js`を使います。
上に貼った`examples`の`Basic.js`をそのまま書いてもアレなので、ちょっとだけ手を加えます。

```js
import React from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'
import Home from './Home'
import Subapp1 from './Subapp1'
import Subapp2 from './Subapp2'


const App = () => (
  <Router>
    <div>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/subapp1">Subapp1</Link></li>
        <li><Link to="/subapp2">Subapp2</Link></li>
        <li><Link to="/topics">Topics</Link></li>
      </ul>

      <hr/>

      <Route exact path="/" component={Home}/>
      <Route path="/subapp1" component={Subapp1}/>
      <Route path="/subapp2" component={Subapp2}/>
      <Route path="/topics" component={Topics}/>
    </div>
  </Router>
)

const Topics = ({ match }) => (
  <div>
    <h2>Topics</h2>
    <ul>
      <li>
        <Link to={`${match.url}/rendering`}>
          Rendering with React
        </Link>
      </li>
      <li>
        <Link to={`${match.url}/components`}>
          Components
        </Link>
      </li>
      <li>
        <Link to={`${match.url}/props-v-state`}>
          Props v. State
        </Link>
      </li>
    </ul>

    <Route path={`${match.url}/:topicId`} component={Topic}/>
    <Route exact path={match.url} render={() => (
      <h3>Please select a topic.</h3>
    )}/>
  </div>
)

const Topic = ({ match }) => (
  <div>
    <h3>{match.params.topicId}</h3>
  </div>
)

export default App
```
できました。(果たしてこれは「手を加えた」のうちに入るのか...)
これだとURL叩いても移動しますし、Linkタグを使って移動もできますね。
#所感
最初は`react-router`だけやるつもりだったのですが、ちょっとウロついてたらいいものが見つかり、ドキュメントを読むのがへたくそな私でも出来上がったので、こちらも書きました。
コピペしかしてないので、内容はあんまり理解できてないです。使ってるうちにわかってきたらいいなぁ。
印象としては後者の方が柔軟にルーティングできるのかと....いや、わかんないですけど(笑)
ご指摘などございましたら、是非お願い致します。