React 画面遷移の実装方法 react-router-dom使用Typescript版

この記事では、React初心者向けにReactでの画面遷移の実装方法をTypescript版で紹介します。

読者に下記のメリットが得られることを目的として作成しています。

Reactで画面遷移の実装方法がわかる
react-rouder-domの使い方がわかる

create-react-app でサンプルアプリを作成
react-router-dom のインストール
表示画面作成
パスと表示するコンポーネントの定義
画面遷移の確認

create-react-app でサンプルアプリを作成

アプリのプロジェクトフォルダを作りたい場所で、下記のコマンドを実行してください。
※Node.jsをインストールしていない方は、Node.jsのインストールから始めましょう。
https://tako-xyz.com/nodejs-install-windows/

npx create-react-app sample_transition --template typescript
cd sample_transition

sample_transition のフォルダが作成されてそこに移動できればOKです。

デフォルトだと、アプリ起動時に下記のエラーが出てしまいます。
TSでは、型定義がない変数はany型になりますが、それを書き方として禁止してるそうなので、そのチェックのエラーが出ます。

Could not find a declaration file for module 'react'

筆者環境では、バージョンを上げると解消されました。下記のコマンドを実行しましょう。

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

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

画面遷移を実装するために react-router-dom というパッケージが必要になります。下記のコマンドを実行してください。
5分ぐらいかかるので、動画でも見て休憩しましょう。

npm install react-router-dom
npm install --save-dev @types/react-router-dom

表示画面作成

まず、画面遷移先となる画面を作成しましょう。

ホーム画面、ページA画面、2つのコンポーネントを作成します。

ホーム画面として、srcの直下に「Home.tsx」を作りましょう。

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

export default function Home() {
  return (
    <div>
      <h1>Home</h1>
      <Link to="/page_a">PageA</Link>
    </div>
  );
}

<Link>コンポーネントは、リンクタグと同じようなもので、事前に定義した画面へ遷移するためのパスを to に指定します。
パスの定義は、後でやります。

ホーム画面にページA画面へのリンクを置いてるだけの画面になります。

ページA画面として、src直下に「PageA.tsx」を作りましょう。

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

export default function PageA() {
  return (
    <div>
      <h1>PageA</h1>
      <Link to="/">Home</Link>
    </div>
  );
}

ページA画面では、ホーム画面へのリンクを置いてるだけの画面になります。

パスと表示するコンポーネントの定義

次に、画面遷移を実現するために、「パス」と「そのパスに対する表示するコンポーネント」を定義する必要があります。

src/App.tsxを開いて編集しましょう。

import React from "react";
import { BrowserRouter, Redirect, Route, Switch } from "react-router-dom";
import Home from "./Home";
import PageA from "./PageA";

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/page_a" exact component={PageA} />
        <Redirect to="/" />
      </Switch>
    </BrowserRouter>
  );
}

export default App;

ここで画面遷移のルートを定義しています。

<BrowserRouter>は、HTML5のhistory APIを使用できるようにするコンポーネントです。
親として置いてください。

<Switch>は、他の言語で言うSwitch文と似たもので、中に挟んだルートのパスにマッチしたら、そのパスに対するコンポーネントを返してくれます。

<Route>は、「パス」と「そのパスに対する表示するコンポーネント」を定義するためのコンポーネントです。
pathに任意のパスを指定、componentに表示する画面のコンポーネントを指定します。
exactは指定したパスとのマッチ条件を完全一致にすることを意味します。

<Redirect>は、マッチするパスがなかった場合のリダイレクト先を定義しています。
to に任意のパスを指定します。