React Routerでのページ遷移を簡単に説明

概要

Reactで開発を行う際、ページ遷移にはReact Routerが使われます。
今回はこれを使って簡単なページ遷移を実装します。

インストール

まずは必要なライブラリをインストールします。

npm install --save react-router-dom

実装

実装していきます。
以下のコードをみてください。

src/components/App.js

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

const PageOne = () => {
  return (
    <div>
      PageOne
    </div>
  );  
}

const PageTwo = () => {
  return (
    <div>
      PageTwo
    </div>
  );
}

const App = () => {
  return (
    <div>
      <BrowserRouter>
        <div>
          <Route path="/" exact component={PageOne} />
          <Route path="/pagetwo"  component={PageTwo} />
        </div>
      </BrowserRouter>
    </div>
  );
};

export default App;

コードをみてわかる通り、PageOneとPageTwoという２つのコンポーネントがあります。
必要なものとしてBrowserRouterとRouteを取ってきます。
BrowserRouterで遷移させたいコンポーネントをラップします。
Routeのところにはpathとexactとcomponentがあります。
みてわかると思いますが、pathには入れたいURL、componentには表示したいコンポーネントを入れます。
exactは簡単にいうと、pathに入っているURLを正確に読み取ります。
つまり、上のコードのexactを消してしまうと"/pagetwo"に飛んだ際にPageOneも表示されてしまいます。
次に以下のコードをみてください。

src/components/App.js

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

const PageOne = () => {
  return (
    <div>
      PageOne
      <Link to="/pagetwo">
        <button>
          show PageTwo when you click this!!
        </button>
      </Link>
    </div>
  );  
};

const PageTwo = () => {
  return (
    <div>
      PageTwo
      <Link to="/">
        <button>
          show PageOne when you click this!!
        </button>
      </Link>
    </div>
  );
};

const App = () => {
  return (
    <div>
      <BrowserRouter>
        <div>
          <Route path="/" exact component={PageOne} />
          <Route path="/pagetwo"  component={PageTwo} />
        </div>
      </BrowserRouter>
    </div>
  );
};

export default App;

ここでは新たにLinkを取ってきています。
これはtoキーワードに表示したいページのURLを入れてラップすることでコンポーネントからページ遷移することができます。
つまり上のコードではボタンをクリックすることでPageOneとPageTwoを行き来しています。

まとめ

今回は簡単にReact Routerについて説明しました。
BrowserRouter以外にもHashRouterやMemoryRouterがあるみたいですが、標準はBrowserRouterなのでしょうか？
参考になれば幸いです。