React Routerを使ってみる #React

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

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

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

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

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>を追記するだけです。

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コンポーネントを表示するように変更を加えます。

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();

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