ベルリンのITスタートアップで働くジャバ・ザ・ハットリの日記

日本→シンガポール→ベルリンへと流れ着いたソフトウェアエンジニアのブログ

React Router v4: react-router-domを使って動かす超シンプルな例

React Router はv3からv4になると大きな変更が入っている。v3のコードのままReact Router をv4にするとまったく動かなくなって結構ハマりがちなので超シンプルなデモを作ってみた。

【デモ】
Rails 5 の上にReactを乗せてreact-router-domを使っている例
https://react-router-dom.herokuapp.com/

リンク押したらヘッダーはそのままで下部のページが切り替わる。ただそれだけのデモ
f:id:tango_ruby:20170622034159p:plain

バージョン

    "react-router-dom": "^4.1.1",
    "react": "^15.6.1",


まず大前提としてReact Routerはv4 で3つに別れた。その3つとはreact-router、 react-router-dom、 react-router-native。
react-routerは残りの2つのコアになる機能をまとめたもの。webの場合はreact-router-domから、nativeはreact-router-nativeからインポートする。

今回はウェブなのでreact-router-domとした。
インストールの方法

npm install --save react-router-dom

インポートのコード事例

import React from 'react';
import ReactDOM from 'react-dom';
import {
  BrowserRouter,
  Route,
  Switch,
  Link
} from 'react-router-dom';

<BrowserRouter>

まずはルーターの設定をする。ルーターは2種類あって<BrowserRouter>と<HashRouter>。
<BrowserRouter>はダイナミックなリクエストを制御するサーバーがある場合。<HashRouter>は静的なファイルのみを扱う場合。
今回は特に意味もなくRailsをバックエンドに使っているので<BrowserRouter>とした。

ReactDOM.render((
  <BrowserRouter>
    <App />
  </BrowserRouter>
), document.getElementById('app'))

<App>

メインの画面構成を<Header>があって、その下に<Main>とした。

const App = () => (
  <div>
    <Header />
    <Main />
  </div>
)

<Link>

<Link>はリンクをクリックした際にページをリロードせずにレンダーするコンテンツ表示を変更させる仕組みを提供する。なので<Header>はこのようになる。

const Header = () => (
  <header>
    <nav>
      <ul>
        <li><Link to='/'>Home</Link></li>
        <li><Link to='/page_a'>Page A</Link></li>
        <li><Link to='/page_b'>Page B</Link></li>
      </ul>
    </nav>
  </header>
)

<Switch>

<Switch>で<Main>内の表示を切り替える。

const Main = () => (
  <main>
    <Switch>
      <Route exact path='/' component={Home} />
      <Route path='/page_a' component={PageA} />
      <Route path='/page_b' component={PageB} />
    </Switch>
  </main>
)

後はPageAとBを作ればできあがり。まー書き方を少し変える必要がありますよ、というのが結論になる。

こんな記事書かなくてもここ見たら全部書いてる訳であんまり意味ないかな、と思ったがせっかく書いたので公開することにした。

全てのコード

import React from 'react';
import ReactDOM from 'react-dom';
import {
  BrowserRouter,
  Route,
  Switch,
  Link
} from 'react-router-dom';

const App = () => (
  <div>
    <Header />
    <Main />
  </div>
)

const Header = () => (
  <header>
    <nav>
      <ul>
        <li><Link to='/'>Home</Link></li>
        <li><Link to='/page_a'>Page A</Link></li>
        <li><Link to='/page_b'>Page B</Link></li>
      </ul>
    </nav>
  </header>
)

const Main = () => (
  <main>
    <Switch>
      <Route exact path='/' component={Home} />
      <Route path='/page_a' component={PageA} />
      <Route path='/page_b' component={PageB} />
    </Switch>
  </main>
)

const Home = () => (
  <div>
    <h1> Home!!!!! </h1>
  </div>
)

const PageA = () => (
  <div>
    <h1> Page A!!!!! </h1>
  </div>
)

const PageB = () => (
  <div>
    <h1> Page B!!!!! </h1>
  </div>
)

ReactDOM.render((
  <BrowserRouter>
    <App />
  </BrowserRouter>
), document.getElementById('app'))

tango-ruby.hatenablog.com
tango-ruby.hatenablog.com
tango-ruby.hatenablog.com
tango-ruby.hatenablog.com
tango-ruby.hatenablog.com