Reactでルーティング設定

実現したいこと

Reactで、ルーティング設定をしたい。

ルーティングとは、簡単に言うと画面遷移です。

ReactのようなSPAを実現するためのフレームワークにも画面遷移という概念は存在します。

今回は、どのように画面遷移をしていくかをみていきます。

ルーティング準備

Reactで、ルーティング設定をするためには、

「react-router-dom」というライブラリを使用するのが一般的です。

npm install react-router-dom

これで、正常にインストールされれば準備は完了です。

ルーティング設定

次にルーティング設定を作成します。

注意点としては、「react-router-dom」のバージョン６からは、

「Switch」が使えずに、「Routes」に変更されています。(2行目)

import React from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import NotFound from "./pages/NotFound";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  );
}

export default App;

上記コードの11行目〜13行目について、解説します。

「path」はURLを指定します。

基本的にプロジェクトを作成したばかりの段階でのURLは、

「localhost:3000」ですので、この後に続くURLを指定します。

「path=”*”」は、定義していないURLへアクセスした場合という意味になります。

「element」は、ページを作っているコンポーネントを指定します。

<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="*" element={<NotFound />} />

画面遷移処理

ルーティング設定は出来ましたが、このままではURLを直接指定しなければ、画面遷移できません。

次は、画面遷移するためのアクションを追加してみます。

下記サンプルコードは、Home画面のボタンをクリックすると、About画面へ遷移する例です。

import React from "react";
import { useNavigate } from "react-router-dom";

function Home() {
  const navigate = useNavigate();

  const gotoAbout = () => {
    navigate("/about");
  };

  return (
    <button onClick={gotoAbout}>
      About
    </button>
  );
}

export default Home;

「react-router-dom」のバージョン６からは、

「useHistory」ではなく、「useNavigate」に変更されています。

useNavigateでは、引数にURLを指定するだけでOKです。

戻る処理の時は、「−1」を渡せばOKです。「useNavigate(-1)」

画面遷移時にデータを渡したいとき

画面遷移する際に、遷移前のページから遷移後のページに

データを渡したいときがあると思います。

そんな時は、useLocationと使うと便利です。

まずは、useNavigateで画面遷移する際の、第2引数を以下のように設定します。

  const gotoAbout = () => {
    navigate("/about", { state: { data: 'aaa' } });
  };

stateプロパティに、遷移後の画面に渡したいデータを追加します。

上記のサンプルコードでは、オブジェクトを設定しています。(stringやnumber型でも可)

次に、遷移後の画面で、以下のようにuseLocationで受け取ります。

const location = useLocation();
const data = location.state.data;

オブジェクトにすれば、複数のデータを一気に送れるので、

個人的にはstateには、オブジェクトを設定しています。

.（ドット）で繋げてプロパティ名を指定できるので、

何のデータなのか直感的に理解できるのもメリットだと思います。

まとめ

今回は、Reactでルーティング設定をする方法について紹介しました。

まずは、「react-router-dom」のインストール。

次に、App.tsxでルーティング設定。

以上です。

これが一番シンプルな方法だと思います。

拡張もできるので、いろいろ試してみてください。