【実装例付き】Reactのルーティング方法

LiSMO techの小谷です。今回はReact.jsのルーティング方法について紹介します。

まず、初めに注意書きを書いておきます。
今回、実装例を載せていますが、create-react-appで作った状態のものから実装をしています。
create-react-appは簡単にReactの開発に必要な環境を用意してくれるものです。

ルーティング方法については、react-router-domというライブラリを使用して実装していきます。
react-router-domのバージョンは6.3.0を使用しました。バージョンによって微妙に書き方が違う点もあるようなので、ご注意下さい。

また、React.jsについては以下のような記事もありますので、ご参考になれば幸いです。

参考例付き！Reactでのスタイリング方法について

React.jsの基礎 | state・propsについて

【React.js】クラスコンポーネントと関数コンポーネントの書き方について

では、本題に入っていきます！

実装例 画面の作成

以下の公式ページを参考にやっていきます。
https://reactrouter.com/docs/en/v6/getting-started/overview#configuring-routes

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

npm i react-router-dom

②以下のようにコードを書く
ルーティングを試すだけなので、必要最低限のものしか書いていないです。

// src\pages\top.js
function Top() {
  return (
    <div>
      <h1>トップ画面</h1>
    </div>
  );
}

export default Top;

// src\pages\setting.js
function Setting() {
  return (
    <div>
      <h1>設定画面</h1>
    </div>
  );
}

export default Setting;

// src\App.js

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Top from './pages/top';
import Setting from './pages/setting';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Top />} />
        <Route path="setting" element={<Setting />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

③これでトップ画面と設定画面ができたので、まずはURL移動でページ遷移してみます。

トップ画面：
http://localhost:3000
設定画面：
http://localhost:3000/setting

となります。どうでしょうか？無事開けたでしょうか？

ちなみに、Routeコンポーネントのpath属性の”/”はトップを表してます。elementはこのパスに対して表示するコンポーネントを定義してます。

実装例 リンク作成

折角なので、リンクも作成します。
react-router-domではLinkコンポーネントが用意されており、これでリンクを作成できるみたいです。このLinkコンポーネントのto属性に飛び先を指定してあげます。
今回はtop.jsでリンクを配置してみるので、以下のようにtop.jsを書き変えてみます。

// src\pages\top.js
import { Link } from "react-router-dom";

function Top() {
 return (
   <div>
     <h1>トップ画面</h1>
     <Link to="setting">setting画面へ</Link>
   </div>
  );
}

export default Top;

これでトップ画面に設定画面のリンクが作成できたと思います！試してみましょう。

まとめ

React.jsでのルーティングする方法としてはreact-router-domを使用して実装をしてみました。

参考になれば幸いです。