🔖

react-router-domで画面遷移【Typesciprt】

2021/11/13に公開

2件

概要

typescriptを用いた、reactでの画面遷移を実装する方法とreact-router-domの使用方法を解説する。なお、使用するアプリはこちらで作成したsample_appを使用する。

バージョン

node: "14.17.5"
npm: "6.14.14"
react-router-dom: "5.3.0"
@types/react-router-dom: "5.3.2"

前準備

reactのprojectを作成していない方は作業を進める予定のディレクトリ内で、ターミナルから以下のコマンドを実行する。

create-react-app .　--template typescript

作成が完了したら、sample_appのディレクトリ配下にcomponentsディレクトリを作成する。そして、その中でPageA.tsxとPageB.tsxを作成する。それぞれのページに以下のコードを入力しておく。

PageA.tsx

import React from 'react'

const PageA = () => {
    return (
        <div>
            <h1>PageA</h1>
        </div>
    )
}

export default PageA

PageB.tsx

import React from 'react'

const PageB = () => {
    return (
        <div>
            <h1>PageB</h1>
        </div>
    )
}

export default PageB

これで前準備は完了です。

画面遷移を実装

①react-router-domをインストール

reactで画面遷移を実装するために必要なパッケージを、ターミナルから以下のコマンドでインストールする。

$ npm install react-router-dom @types/react-router-dom

※javascriptでreactを使用する場合は前者のパッケージのみをインストールすればいいのだが、typescriptでreactを使用する場合は両方のパッケージをインストールする必要がある。

②ファイル内で必要なモジュールを読み込む

作業ファイル内、今回はデフォルトで作成されているApp.tsx内に以下のコードを入力する。

App.tsx

import {BrowserRouter, Switch, Route} from "react-router-dom"
import PageA from "./components/PageA"
import PageB from "./components/PageB"

これで必要なモジュールを読み込む準備が完了しました。

③ルーティングを実装する

App.tsx内のコードを以下に変更する。

// モジュールのインポート
import React, { FC } from 'react';
import {BrowserRouter, Switch, Route} from "react-router-dom"
import PageA from "./components/PageA"
import PageB from "./components/PageB"

// ルーティングの実装
const TopPage: FC = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/PageA">
          <PageA />
        </Route>
        <Route exact path="/PageB">
          <PageB />
        </Route>
      </Switch>
    </Router>
  )
}

export default App