アルパカログ

Webエンジニア兼マネージャーがプログラミングやマネジメント、読んだ本のまとめを中心に書いてます。

React URLパスを定義してページ遷移する方法(react-router-dom)

f:id:otoyo0122:20200913170255p:plain:w300

react-router-domを使うと、ReactでURLパスによるページ遷移を実装することができます。

しかし、ReactやSPAに慣れていない人にとっては、react-router-domの使い方に少し戸惑うかもしれません。

このエントリでは、react-router-domを使ったページ遷移の実装方法を紹介します。

react-router-domのインストール

Reactアプリのプロジェクトディレクトリに移動し、react-router-domをインストールします。

$ npm install --save react-router-dom

App.jsでreact-router-domから必要なモジュールをインポートします。

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

サンプルアプリのページ構成

サンプルアプリは、ログインページとホームページの2つのページを持ったアプリとします。

最初にsrc/components/以下に2つのページのコンポーネントを作成します。

components/LoginPage.js

import React, { Component } from 'react';

class LoginPage extends Component {
  render() {
    return (
      <div className="LoginPage">
        This is LoginPage
      </div>
    );
  }
}

export default LoginPage;

components/HomePage.js

import React, { Component } from 'react';

class HomePage extends Component {
  render() {
    return (
      <div className="HomePage">
        This is HomePage
      </div>
    );
  }
}

export default HomePage;

次に、App.jsにルーティングを定義し、2つのページへのリンクを追加します。

App.js

import React from 'react';
import './App.css';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import LoginPage from './components/LoginPage';
import HomePage from './components/HomePage';

function App() {
  return (
    <div className="App">
      <Router>
        <Link to="/login">Login</Link>
        <Link to="/home">Home</Link>
        <Route path='/login' component={LoginPage}/>
        <Route path='/home' component={HomePage}/>
      </Router>
    </div>
  );
}

export default App;

ポイントは、Routeコンポーネントが指定したコンポーネントのレンダリングによって置き換わるということです。

ページ遷移するアプリでは、App.jsなど一箇所にルーティングを集めるのが良さそうです。

動作確認

npm startコマンドでサーバーを起動して動作確認します。

下記のようにリンクが現れ、リンクをクリックしたときに文言が変われば成功です。

f:id:otoyo0122:20200913172052p:plain:w300

以上です。

このエントリでは、react-router-domを使ってページ遷移の実装方法を紹介しました。

参考になった方は、ぜひ「はてブ」やSNSでシェアしていただけると嬉しいです。

Firebase HostingにReactアプリをデプロイしたい

Firebase HostingにReactアプリをデプロイしたい方は、下記エントリが参考になりそうです。

alpacat.hatenablog.com