🔖

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

④ルーティングの確認

以上の手順を踏まえて、ターミナルで

$ npm start

を実行する。そして、表示されたブラウザからURLに"/PageA"と"/PageB"を入力してそれぞれページ内にPageA、PageBが表示されたらルーティングの実装に成功している。

Discussion

gomachan_sesamegomachan_sesame

前準備にある PageA.tsx の最終行

export default PageB

は PageB ではなく PageA でしょうか

nakashi94nakashi94

コメントありがとうございます。

そうですね、PageAの間違いです。
訂正しておきます。

ログインするとコメントできます