スポンサーリンク

【React】ページ遷移の方法を初心者向けにご紹介。

TypeScript
スポンサーリンク

今回の記事ではTypeScriptベースのReactプロジェクトでページ遷移を行う方法を初心者向けにご紹介する記事です。ページ遷移は初心者が苦戦する場所と思われるのでできるだけわかりやすく説明していきます。是非参考にしてください。

スポンサーリンク

TypeScriptのReactプロジェクト作成

node等がインストールされてない方はインストールして下さい。その前提で話を進めます。

npx create-react-app sample --template typescript

まずは上記で「sample」プロジェクトを作成します。

cd sample
npm start

これでローカルサーバが立ち上がって初期画面が表示できます。

ではページ遷移に関してご紹介していきます。

Reactでページ遷移を行うためのモジュール

Reactでページ遷移をする上で必要なライブラリは「react-router-dom」です。起動したローカルサーバを閉じて、下記コマンドを実行し、ライブラリをインストールします。

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

ではこのライブラリを使ったページ遷移を行う方法を解説していきます。

Reactでページ遷移を行う方法

App.tsxのみを変更してページ遷移をおこなってみます。

同一ファイル内のコンポーネントで表示を切り替える

1ページ内でページ遷移を実装することは少ないと思いますが、下記で実装できます。

import './App.css';
import { BrowserRouter, Route,Link, Routes } from 'react-router-dom';

// 最初に表示されている遷移元ページ
const Home = () => {
   return (
     <div>
       <h1>
         元ページ
       </h1>
       <Link to="/Senni">遷移</Link>
     </div>
   )
}

//遷移先
const Senni = () => {
  return (
    <div>
      <h1>
        遷移しました。
      </h1>
    </div>
  )
}

// メイン画面(pathによって表示数画面を変更)
const App = () => {
  return (
   <BrowserRouter>
      <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/Senni" element={<Senni />} />
      </Routes>
   </BrowserRouter>
  )
};

export default App;

下記コマンドでサーバを起動できます。

npm start
遷移をクリック

     ↓

URLじかうちでもOK

「react-router-dom」をimportして下記のようにpathの中身を変えて定義します。

<BrowserRouter>
    <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/Senni" element={<Senni />} />
    </Routes>
</BrowserRouter>

初期表示が下記URLのため、①画面が表示され、リンクをクリックすると②画面が表示されているという流れです。

  • 「http://localhost:3000/」 → ①画面
  • 「http://localhost:3000/Senni」 → ②画面

ページごとにファイルが別れている場合が多いと思うのでそちらも記述します。

別ファイルに記述したページへ遷移

まずは、元ページからの遷移ページ用ファイルを作成します。

「App.tsx」「index.tsx」と同階層に「Senni.tsx」ファイルを作成します。

ファイルの中身は下記のように記述してください。

const Senni = () => {
    return (
      <div>
        <h1>
          遷移
        </h1>
      </div>
    )
  }

export default Senni;

「App.tsx」はSeniの部分を外部ページから取ってきましょう。

import './App.css';
import { BrowserRouter, Route,Link, Routes } from 'react-router-dom';
import Senni from './Senni' //ここで別ファイルからコンポーネントを読み込み

// 最初に表示されている遷移元ページ
const Home = () => {
   return (
     <div>
       <h1>
         元ページ
       </h1>
       <Link to="/Senni">遷移</Link>
     </div>
   )
}

// メイン画面(pathによって表示数画面を変更)
const App = () => {
  return (
   <BrowserRouter>
      <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/Senni" element={<Senni />} />
      </Routes>
   </BrowserRouter>
  )
};

export default App;

「import Seni from ‘./Seni’」の部分で外部ファイルからコンポーネントをインポートしています。

では今回の記事は以上です。

React・TypeScriptは現在勉強中のため、随時記事を更新していきます。興味がある方はサイト内みて行ってください。

本記事を読んでいただき感謝です。サイトを訪れていただいた方はプログラミング勉強中かと思いますのでプログラミング勉強のコツを合わせてご紹介。

スポンサーリンク
スポンサーリンク
スポンサーリンク

ブログに関しては500円程度かかりますが、それ以外は無料です。知識の吸収と並行してアウトプットは非常に効率が良いです。テックアカデミーに関しては講座レベルが高いにも関わらず、無料体験や人気口座も大幅値下げがあるので、重点的に学びたいものを無料体験してみてください。

転職時にも、エンジニアからテックアカデミー・Paizaは認知度が高いので、未経験入社採用を行う際履歴書で目に留まります。特にPaizaのスキルレベルA・SなどはIT業界でも評価されます。

テックアカデミー・Paizaの無料登録ができる期間中にぜひご利用してみてください。私も活用経験ありです。

TypeScript
スポンサーリンク
スポンサーリンク
ともぶろぐ

コメント

タイトルとURLをコピーしました