【React】「react-router」でのページ遷移の実装方法

今回はタイトルにもある通り、CordovaとReactで作成しているアプリにページ遷移を導入する方法についてです。
流石に1ページだけではアプリらしくないですからね。

なお導入方法について、参考にさせていただいた記事はこちら。

react-router@v4を使ってみよう：シンプルなtutorial – Qiita
https://qiita.com/m4iyama/items/b4ca1773580317e7112e

さて、導入ですが、まずは下記のコマンドで react-router-dom をインストールします。

npm install react-router-dom

事前準備はこれだけ。
あとは、実際にコードを書いていきます。

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

const App = () => {
  return (
      <BrowserRouter>
        <div>
            <ul>
                <li><Link to='/'>Home</Link></li>
                <li><Link to='/about'>About</Link></li>
                <li><Link to='/friends/10'>Friends</Link></li>
            </ul>
            <hr />

            <Route exact path='/' component={Home} />
            <Route path='/about' component={About} />
            <Route path='/friends/:ids' component={Friends} />
        </div>
    </BrowserRouter>
  );
}

const Home = () => (
  <div>
    <h2>Home</h2>
    Homeページです
  </div>
)
const About = () => (
  <div>
    <h2>About</h2>
    Aboutページです
  </div>
)
const Friends = ({ match }) => (
  <div>
    <h2>Friends</h2>
    Friendページです{match.params.ids}
  </div>
)
export default App

ちなみに、上記のファイルを実際に画面に表示しているのはこちらのコードです。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';  // 上記のコードが書かれたjsファイル

ReactDOM.render(
    <App />,
    document.getElementById('root')
);

ほぼサンプルコードのままですが、動作を理解するにはぴったりです。
まず、 BrowserRouterタグで一番外側を囲い、Routeタグで表示させたいページとそのURLを指定しています。
リンクについては、Linkタグを使います。
こちらは、HTMLのaタグとイメージが近いと思います。

また、ページ遷移をした際、値を渡すことも可能です。
11行目のfriendsページへのリンク先のように、ページ名の後に /[値] と指定します。
また、16行目のように、URLから値を受け取れるようにします。
そして、受け取った値は、34行目からのFriendsページで取得・表示をしています。
今回は、値を表示させているだけですが、値によって表示するデータを変えるなどの処理が行えます。

基本的なことは、以上が分かっていれば問題なく実装できるかと思います。

以上、react-routerでページ遷移を実装する方法でした。
次回は、Linkタグを使わずに、関数内でページ遷移する方法についてご紹介できればと思います。