React URLパスを定義してページ遷移する方法(react-router-dom)

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つのページのコンポーネントを作成します。

import React, { Component } from 'react';

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

export default LoginPage;

components/LoginPage.js

import React, { Component } from 'react';

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

export default HomePage;

components/HomePage.js

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

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;