React.js
Pocket

ReactでSPAを作る時、ページ遷移ってどうするのかなと調べているとReact Routerにたどり着いたので試してみました。

React Router

Reactを試す環境がある方はそれで、なければ以下で環境の作り方書いてます。今のところ問題なく動きます。

webpackでReact.jsとwebpack-dev-serverを使えるようにする

もくじ
  1. インストール
  2. 各ページをつくる
  3. ルーティングする
  4. アクティブページにスタイルをあてる

インストール

まずはnpm installでReact Routerをインストールします。

npm i react-router -S

インストールが完了し、package.jsonのdependenciesに追加されていたらOKです。

各ページをつくる

ページ構成はサンプルでsrcディレクトリ以下に、「app.js」「home.js」「about.js」「contact.js」を作ってみます。今回はapp.jsでルーティングの設定をするので、それ以外のページを作ります。

といっても中身はほぼ同じものにしています。

home.js

import React from 'react';
import {render} from 'react-dom';

export class Home extends React.Component {
  render() {
    return (
      <div>home</div>
    );
  }
}

about.js

import React from 'react';
import {render} from 'react-dom';

export class About extends React.Component {
  render() {
    return (
      <div>about</div>
    );
  }
}

contact.js

import React from 'react';
import {render} from 'react-dom';

export class Contact extends React.Component {
  render() {
    return (
      <div>contact</div>
    );
  }
}

ルーティングする

app.jsでルーティングします。ごちらが全コードです。

import React from 'react';
import { render } from 'react-dom';
import { Router, Route, IndexRoute, Link, IndexLink, browserHistory } from 'react-router';

import { Home } from './home.js';
import { About } from './about.js';
import { Contact } from './contact.js';

class App extends React.Component {
  render () {
    return (
      <div>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="about">About</Link></li>
          <li><Link to="contact">Contact</Link></li>
        </ul>
        <div>
          {this.props.children}
        </div>
      </div>
    );
  }
}

render((
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={Home} />
      <Route path="about" component={About} />
      <Route path="contact" component={Contact} />
    </Route>
  </Router>
),
document.getElementById('app'));

「history={browserHistory}」のところを、最初はbrowserHistoryではなく、hashHistoryを使っていました。hashHistoryはハッシュ(#)を使ってルーティングするのに対し、browserHistoryはURLでルーティングするようです。

どちらがどういいのか分からないですが、一般的なWebサイトのURLのようにするためにbrowserHistoryを使ってみました。

アクティブページにスタイルをあてる

メニューがあると、もう一つ気になるのはアクティブページのメニューだけスタイルをあてること。

以下のように追記します。

// 省略
const ACTIVE = { color: 'red' }

class App extends React.Component {
  render () {
    return (
      <div>
        <ul>
          <li><Link to="/" activeStyle={ACTIVE}>Home</Link></li>
          <li><Link to="about" activeStyle={ACTIVE}>About</Link></li>
          <li><Link to="contact" activeStyle={ACTIVE}>Contact</Link></li>
        </ul>
        <div>
          {this.props.children}
        </div>
      </div>
    );
  }
}

// 省略

スタイルをどこかで設定して、LinkタグにactiveStyleという属性を追加して、そこで指定します。

さいごに

React Routerも調べてもなかなか出てこず苦戦しておりました(今でも苦戦)。

コードを参考にするのにいいなと思ったのはGitHubのReact Routerのコードをダウンロードして、その中にある「examples」をみること。

exampleのドキュメントに書いてあるように、examplesディレクトリにターミナルで移動して「npm install」(結構時間かかる)、そして「npm start」すると、「http://localhost:8080」で確認できます。

いろんなページ遷移の方法があるので、やってみたい動きのコードを見て真似るのが一番いいかなと。

仕様がちょいちょい変わってるようで、こんな話も…。

大幅変更されそうな react-router @ next (v4) 覗き見メモ

Qiita @inuscript

また、React Router以外にも、Angularで使われていた「UI Router」というものもReactで使えるようになっています。

UI-Router-React

これもちょっと試してみましたが、けっこうサクッとできました。アクティブページのハイライトも簡単にできます。どちらがいいかは今後試してみます。

参考サイト

react-router で ルーティング

スマホ神
Pocket

カテゴリー: タグ: