はじめに

本記事では、前回の記事で作成したアプリケーションにreact-routerを利用して、ルーティング機能をつけてみました。

react-routerを使うメリット
react-routerをインストール
作ったアプリ
サンプルコード

react-routerを使うメリット

Reactのみを用いたSPAアプリでは、ページが遷移してもURLが変わらないです。そのため、ブラウザの「戻るボタン」や「履歴機能」が使えなくなってしまい不便です。react-routerを利用すると、これらの問題が解決します。ページがブラウザ上で切り替わるたびに、URLが変更される機能をreact-routerで実現できるからです。

react-routerをインストール

react-routerをインストールします。今回は、react-routerのdomパッケージを利用します。アプリケーションのディレクトリへ移動して下記のコマンドを実行しましょう。

npm i react-router-dom -S

iはinstallの省略系です。-Sはpackage.jsonにインストールしたパッケージを記録します。これによって、gitなどでアプリケーションをクローンしたときに、npm initを実行することで依存関係を解決できるので便利な機能です。

作ったアプリ

サンプルコード

まずは、必要なコンポーネントの読み込みを行います。今回使用するのは、Route, Link, BrowserRouterの3つです。太字の行を前回の記事で作成したApp.jsに追加しましょう。

import React, { Component } from 'react';
import {
  Route,
  Link,
  BrowserRouter
} from "react-router-dom";

次にApp.jsのBodyコンポーネントの書き換えを行います。BrowserRouterでページの全体を囲いましょう。

class Body extends Component {
  constructor(props) {
    super(props);
    this.state = { value: <div>main</div> };
  }

  showPage1() {
    this.setState({ value: (<div>page1</div>) });
  }

  showPage2() {
    this.setState({ value: (<div>page2</div>) });
  }

  showPage3() {
    this.setState({ value: (<div>page3</div>) });
  }

  render() {
    return (
    <BrowserRouter>
      <div>
        <ul>
          <li>
            <ChangeButton link="#1" value="page1" onClick={() => this.showPage1()} />
          </li>
          <li>
            <ChangeButton link="#2" value="page2" onClick={() => this.showPage2()} />
          </li>
          <li>
            <ChangeButton link="#3" value="page3" onClick={() => this.showPage3()} />
          </li>
        </ul>
        <div>{this.state.value}</div>
      </div>
    </BrowserRouter>
    );
  }
}

次に<BrowserRouter>で囲われた部分を修正していきます。まず、リンクがアンカーリンクになっているので、適当なリンク先に変更して、Linkコンポーネントで書き換えます。

<BrowserRouter>
  <div>
    <ul>
      <li>
        <Link to="/page1">Page1</Link>
      </li>
      <li>
        <Link to="/page2">Page2</Link>
      </li>
      <li>
        <Link to="/page3">Page3</Link>
      </li>
    </ul>
    <div>{this.state.value}</div>
  </div>
</BrowserRouter>

そして、リンクに応じてテキストのコンテンツが変わるように変更します。

<BrowserRouter>
  <div>
    <ul>
      <li>
        <Link to="/page1">Page1</Link>
      </li>
      <li>
        <Link to="/page2">Page2</Link>
      </li>
      <li>
        <Link to="/page3">Page3</Link>
      </li>
    </ul>
    <div>
      <Route path="/" component={Default}/>
      <Route path="/page1" component={Page1}/>
      <Route path="/page2" component={Page2}/>
      <Route path="/page3" component={Page3}/>
    </div>
  </div>
</BrowserRouter>

これだけでは、Default, Page1, Page2, Page3のコンポーネントがないので動きません。なので、これらのコンポーネントを作成しましょう。

function Default() {
  return (
    <div>main</div>
  );
}

function Page1() {
  return (
    <div>page1</div>
  );
}

function Page2() {
  return (
    <div>page2</div>
  );
}

function Page3() {
  return (
    <div>page3</div>
  );
}

class Body extends Component {
...

ここまでで、一度アプリケーションを動かしてみます。

すると、mainという文字が常に表示されていて意図したとおりの挙動をしてません。Routerの設定が不適切なのが原因です。

現状のRouteの設定では、

<Route path="/" component={Default}/>

となっています。これは、’/’以下のパスすべてでコンポーネントを表示する設定になっています。これを’/’のパスのみの設定に書き直します。次のように書き換えると問題は解決します。

<Route exact path="/" component={Default}/>

これで、完成です。

【React】react-routerを使う。