React Routerを使ってみる

まずはサンプル用のプロジェクトを作成します。

```
create-react-app router
```

上記のコマンドを実行してしばらくすると、以下のようなログが表示されます。

```
Success! Created router at /Users/sh0/Documents/git_repo/examples/react/modern/router
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd router
  yarn start
```

次にReact Routerをインストールします。

```
npm install --save react-router-dom
```

その他のパッケージで足りないものがあるので、`npm install`しておきます。

```
npm install
```

一通りインストールが終わったら、一度

```
yarn start
```

を実行して、ブラウザが立ち上がることを確認します。

<img width="1100" alt="React App 2018-01-08 08-44-35.png" src="https://qiita-image-store.s3.amazonaws.com/0/226431/57937f8a-3522-c016-6095-6b751bbe060c.png">

雛形にファイルを追加していきます。
React Routerの簡単なサンプルです。

```javascript:src/RouterExample.js
import React from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'

const RouterApp = () => (
  <Router>
    <div style={{margin: 20}}>
      <Route exact path='/' component={Home} />
      <Route path='/easy' component={EasyCourse} />
      <Route path='/normal' component={NormalCourse} />
      <Route path='/hard' component={HardCourse} />
    </div>
  </Router>
)

const Home = () => (
  <div>
    <h1>React Router Lesson</h1>
    <p>コースを選択してください。</p>
    <ul>
      <li><a href='easy'>Easy</a></li>
      <li><a href='normal'>Normal</a></li>
      <li><a href='hard'>Hard</a></li>
    </ul>
  </div>
)

const EasyCourse = () => (
  <div>
    <h1>Easy Course</h1>
    <p><a href="/">Back</a></p>
  </div>
)

const NormalCourse = () => (
  <div>
    <h1>Normal Course</h1>
    <p><a href="/">Back</a></p>
  </div>
)

const HardCourse = () => (
  <div>
    <h1>Hard Course</h1>
    <p><a href="/">Back</a></p>
  </div>
)

export default RouterApp
```

次に、`public/index.html`を編集します。
`<div id="routerExample"></div>`を追記するだけです。

```html:public/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <div id="routerExample"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

```

次に`src/index.js`にRouterAppコンポーネントを表示するように変更を加えます。

```javascript:src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import RouterApp from './RouterExample'
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
ReactDOM.render(<RouterApp />, document.getElementById('routerExample'));
registerServiceWorker();
```

ブラウザに変更が自動的に反映されているはずなので、確認します。
以下のようにページ遷移を設定することができました。

![screencast 2018-01-08 10-26-14.gif](https://qiita-image-store.s3.amazonaws.com/0/226431/721b55d3-e4d9-fe75-8c14-fbb1b0e99ff7.gif)