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/

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

バージョン

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

まず大前提として React Router は v4 で３つに別れた。その３つとは react-router、 react-router-dom、 react-router-native。
react-router は残りの２つのコアになる機能をまとめたもの。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>

まずはルーターの設定をする。ルーターは２種類あって<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')
)

<BrowserRouter>

<App>

<Link>

<Switch>

全てのコード

関連記事