スポンサーリンク

【React】ボタンでのページ遷移方法ご紹介。〜 初心者向け 〜

TypeScript
スポンサーリンク

今回の記事はTypeScriptベースのReactでボタンでのページ遷移方法に関する初心者用の記事です。ボタンアクションを使ってページ遷移の練習をおこなってみましょう。初心者でもわかるように簡単に記載していくので是非参考にしてみてください。

スポンサーリンク

Reactプロジェクト環境構築

タイプスクリプトベースのReactプロジェクトを作成します。

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

npx create-react-app sample --template typescript

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

cd sample
npm start

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

上記画面が表示されればうまく環境構築できているのでOKです。

Reactで画面にボタンを配置

まずは、ボタンを配置してみましょう。「src/App.tsx」を以下のように修正します。

import './App.css';

// メイン画面(pathによって表示数画面を変更)
const App = () => {
  return (
   <div>
     <h1>元ページ</h1>
     <button>ボタン</button>
   </div>
  )
};

export default App;

これだけで画面にボタンが表示されます。

「index.tsx」は変更しなくてOKです。

次にこのボタンにアクションをつけてみましょう。

Reactで画面のボタンにコンソールアクション

import './App.css';

// メイン画面(pathによって表示数画面を変更)
const App = () => {
  // ボタンアクション
  const onConsole = () => {
    console.log('ボタンクリック')
  }

  return (
   <div>
     <h1>元ページ</h1>
     <button onClick={onConsole()}>ボタン</button>
   </div>
  )
};

export default App;

見た目は変わりませんが、これでボタンを押した際にコンソールに文字が出力されます。

ページ遷移用モジュールのインストール

ではいよいよページ遷移を行います。

ページ遷移にはいろいろ種類がありますが、今回は最も簡単な方法をご紹介します。

下記「react-router-dom」というモジュールをインストールします。

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

種類や値を渡すなどに関しては別記事を記載しているのでそちらを参考にしみてください。

【React】ページ遷移の種類と実装ご紹介。〜 初心者向け 〜
【React】ページ遷移時の値渡しの種類と実装ご紹介。〜 初心者向け 〜

こちらこの記事の終わりにも再度リンク貼りますので後で見たい方はこの記事身終えてから見てみてください。

Reactで画面のボタンにページ移動

では先ほどインストールした「react-roter-dom」を利用してページ遷移ボタンアクションを画面に組み込んで見ましょう。

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

// 最初に表示されている遷移元ページ
const Home = () => {
  // 遷移用ボタンアクション
  const navigation = useNavigate()
  const onMovePage = () => {
    navigation("/Senni");
  }

   return (
     <div>
       <h1>
         元ページ
       </h1>
       <button onClick={onMovePage}>ボタン</button>
     </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;

画面遷移ように二つのコンポーネントを用意しています。

// 最初に表示されている遷移元ページ
const Home = () => {
  // 遷移用ボタンアクション
  const navigation = useNavigate()
  const onMovePage = () => {
    navigation("/Senni");
  }

   return (
     <div>
       <h1>
         元ページ
       </h1>
       <button onClick={onMovePage}>ボタン</button>
     </div>
   )
}

上記が初期表示されている画面部分(コンポーネント)です。

//遷移先
const Senni= () => {

  return (
    <div>
      <h1>
        遷移しました。
      </h1>
    </div>
  )
}

上記が遷移した後の画面表示です。

この画面コンポーネントを下記のルーティングに沿って入れ替えているイメージです。

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

// 例
// http:localhost:3000/がブラウザで開かれた場合 → <Home />
// <Route path="/" element={<Home />} />

// http:localhost:3000/Senniがブラウザで開かれた場合 → <Senni />
// <Route path="/Senni" element={<Senni />} />

このURLは初期表示の場合は「http:localhost:3000」が開かれる場合、「<Home />」が開かれます。そこでURLを変更する指示をボタンアクションに組み込んでいるのが下記です。

// 遷移用ボタンアクション
  const navigation = useNavigate()
  const onMovePage = () => {
    navigation("/Senni");
  }

「useNavigator」という便利メソッドを使用しています。

使用している部分は下記です。

<button onClick={onMovePage}>ボタン</button>

これで画面遷移ができていると思います。

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

ページ遷移には複数種類があるため、気になる方は下記記事も参考にしてみてください。

【React】ページ遷移の種類と実装ご紹介。〜 初心者向け 〜
【React】ページ遷移時の値渡しの種類と実装ご紹介。〜 初心者向け 〜

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

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

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

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

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

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

コメント

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