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

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

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

yarn add react-router@3

##ルーティングします
ここではindex.jsでルーティングしていきます。
あらかじめSubapp1.js、Subapp2.js、Home.jsを作っておきました。それぞれの中身はrender()でページ名を出すだけです。
ではindex.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でルーティング
ここのexamplesに例がたくさん載ってるので、基本コピペで行けそうです。

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

yarn add react-router-dom

##ルーティングします
さっきはindex.jsに書きましたが、今回はApp.jsに書いてます。先程と同様にSubapp1.js、Subapp2.js、Home.jsを使います。
上に貼ったexamplesのBasic.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だけやるつもりだったのですが、ちょっとウロついてたらいいものが見つかり、ドキュメントを読むのがへたくそな私でも出来上がったので、こちらも書きました。
コピペしかしてないので、内容はあんまり理解できてないです。使ってるうちにわかってきたらいいなぁ。
印象としては後者の方が柔軟にルーティングできるのかと....いや、わかんないですけど(笑)
ご指摘などございましたら、是非お願い致します。