react-router-domを使用したSPAの画面切り替え（遷移）の方法【React】

■はじめに

react-router-domを使用したSPA（シングルページアプリケーション）の画面切り替え（遷移）方法を記載します。

以下のサイトを参考に環境構築、プロジェクト作成は済ませてからこちらの記事をご覧ください。

www.reigle.info

■手順

画面の構成として、「One」「Two」の2つの画面を切り替えれるように記載します。

以下のコマンドで、「react-router-dom」をインストールします。

npm i react-router-dom

ソースコードの全量は以下。

import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { Link } from 'react-router-dom'
import One from './One';
import Two from './Two';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Router>
          <div>
            <Route exact path='/' component={One}/>
            <Route path='/Two' component={Two}/>

            <Link to="/">One</Link>
            <br/>
            <Link to="/Two">Two</Link>
          </div>
        </Router>
      </div>
    );
  }
}

export default App;

import React from 'react'

class One extends React.Component {
  render(){
    return(
      <div>
        <h1>One</h1>
      </div>
    )
  }
}


export default One;

import React from 'react'

class Two extends React.Component {
  render(){
    return(
      <div>
        <h1>Two</h1>
      </div>
    )
  }
}


export default Two;