はじめに

ReactでSPA(シングルページアプリケーション)を作成する上で初歩となる、React Routerに関する記事になります。

前提

この記事では環境構築、「create-react-app」でまでの作業が完了していることを前提に進めます。

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

まず今回使用するreact-router-domライブラリをインストールします。

npm install react-router-dom

2、遷移先用のjsxを用意する

今回はまずcssもなにもない、ただ文字が表示されるだけの関数コンポーネントが記述されたjsx（hello.jsx、seeyou.jsx）を、 src > page(任意のフォルダ) 配下に用意します。
jsファイルでも問題ありません。

hello.jsx

import React from 'react';

function hello(){
    return (
        <div>
            hello
        </div>
    )    
}

export default hello;

seeyou.jsx

import React from 'react';

function seeyou(){
    return (
        <div>
            seeyou
        </div>
    )    
}

export default hello;

3、App.jsの編集

実際の表示ページであるApp.jsでは、「BrowserRouter」、「Route」、「Link」をインポートします。
BrowserRouterを親要素として、その中にRoute、Linkを記述します。
Routeタグの中ではpathでURLを指定していて、「exact」はpathに指定したURLが完全一致した時のみ表示できるようになります。
componentでは、そのパスに対して表示するコンポーネントを指定しています。

App.js

import React from 'react';
import {
  BrowserRouter,
  Route,
  Link
} from "react-router-dom";
import hello from './page/hello';
import seeyou from './page/seeyou';

function App() {
 return (
   <BrowserRouter>
     <ul>
       <li><Link to="/hello">こんにちは</Link></li>
       <li><Link to="/seeyou">さよなら</Link></li>
       <li><Link to="/">リセット</Link></li>
     </ul>
     <Route path="/hello" exact component={hello} />
     <Route path="/seeyou" exact component={seeyou} />
   </BrowserRouter>
 );
}