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

■はじめに

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

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

https://www.reigle.info/entry/2021/05/22/132803

■手順

画面の構成として、「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 (

        <Router>

            <Route exact path='/' component={One}/>
            <Route path='/Two' component={Two}/>

            <Link to="/">One</Link>

            <Link to="/Two">Two</Link>

        </Router>

    );
  }
}

export default App;

import React from 'react'

class One extends React.Component {
  render(){
    return(

# One

    )
  }
}

export default One;

import React from 'react'

class Two extends React.Component {
  render(){
    return(

# Two

    )
  }
}

export default Two;