スポンサーリンク

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

TypeScript
スポンサーリンク

今回の記事は初心者向けにReactでページ遷移時に値渡しを行う方法に関して詳細に解説していきます。ページ遷移と値渡しに関してはいくつかの種類があるため、それぞれのメリットを含めて解説していきます。React勉強中の方は是非参考にして見てください。

スポンサーリンク

TypeScriptのReactプロジェクト作成

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

npx create-react-app sample --template typescript

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

cd sample
npm start

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

ではページ遷移と値渡しの種類に関してご紹介していきます。

Reactページ遷移方法

Reactでページ遷移を行う方法に関しては下記記事でメインで紹介しております。

「【React】ページ遷移を行う方法ご紹介。」

最低限下記でページ遷移に必要なモジュール「react-router-dom」をインストールしておけばコードは動きます。

npm install react-router-dom @types/react-router-dom
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;

まずは、Reactページ遷移時の値の受け渡しの種類に関して紹介します。

Reactページ遷移時の値渡しの種類

Reactのページ遷移時の値渡しに関してはいくつか種類があります。

  • Props
  • クエリパラメータ
  • State渡し
  • Redux

他にもあるかもですが、私が使ったことがあるのはこれくらいです。

まずは種類に関して簡単な説明をしていきます。種類はもういいという方は一つ下の章の、実装のところから実際に使用した上での解説を載せています。サンプルを動かして確認してみてください。

PropsでのReactページ遷移時の値渡し

ReactにおけるPropsは最重要と言っても過言ではないです。コンポーネントを呼び付出す際に必要な引数のようなイメージで下記のように記載します。

<Component props1={"コンポーネントの値1"} props2={"コンポーネントの値2"} />

ページ専用に呼び出したコンポーネントにPropsで値を渡すことができます。

Propsの値渡しははPropsの値が変更されたタイミングでPropsが渡されているコンポーネント全てに変化を伝播させることができるので便利です。

Propsに関してまだ理解が進んでいない方は別途記事を書いているので下記をまずは読んでみましょう。

【React】ReactにおけるPropsとは？ 〜 初心者用にわかりやすく解説 〜

クエリパラメータでのReactページ遷移時の値渡し

クエリパラメータは下記のようなURLの最後にパラメータを埋め込むことです。

http://localhost:3000/testPage/パラメータ
例）http://localhost:3000/testPage/1

URLを指定してページ遷移する場合で、そのページで固有のID等が存在する場合はこちらを利用すると良いです。

もちろんそのIDを取得するメソッドがReactには存在するのでそちらを利用して値を取り出し、ページで使用することができます。

State渡しでのReactページ遷移時の値渡し

State渡しという名前が正しいかはわかりません。「useNavigator」「useLocation」を用います。

こちらはURLを指定して、ページ遷移する場合、クエリパラメータとは違ってURLには何も値が入りませんが、次のページに値を受け渡せる方法です。ID等をURLに載せたくない場合や、単一のIDなどではなくオブジェクトを受け渡す際などに利用できます。

/** クエリストリング */


http://localhost:3000/testPage/
localhost
パラメータ
例）http://localhost:3000/testPage/1

/** State渡し */


http://localhost:3000/testPage
localhost

　　　　　　＋
// 裏でState↓を渡す
state = {
  Id:1
  Text:"Id1"
}

ReduxでのReactページ遷移時の値渡し

戻るボタン等でページに進んだ後、再びページに戻ってくる場合がある。

入力→入力確認⇨入力に戻るなどの流れで値を保持したい場合はReduxを使用する必要があります。

React初学者はReduxはなかなか難しいため、本記事では割愛させていただきます。興味がある方は下記リンクより記事を記載してみたのでそちらをみてください。

【React】Reduxの使い方ご紹介。〜 初心者向け 〜

では次にページ遷移を行うコードをみていきましょう。

Reactページ遷移時の値渡し実装

PropsでのReactページ遷移時の値渡し実装

Props渡しでページ遷移時に値を渡すコードは下記です。

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

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

// 遷移先Props
type SenniProps = {
  id:number,
  text:string,
}

//遷移先
const Senni:React.VFC<SenniProps> = (props) => {
  return (
    <div>
      <h1>
        遷移しました。
      </h1>
      <h2>ID:{props.id}　テキスト{props.text}</h2>
    </div>
  )
}

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

export default App;

解説をしていきます。

TypeScriptでプロジェクトを作成しているため、Propsの方も定義しています。

// 遷移先Props
type SenniProps = {
  id:number,
  text:string,
}

propsで渡ってきた部分を画面意表するようのコンポーネントです。

//遷移先
const Senni:React.VFC<SenniProps> = (props) => {
  return (
    <div>
      <h1>
        遷移しました。
      </h1>
      <h2>ID:{props.id}　テキスト{props.text}</h2>
    </div>
  )
}

このPropsの型を指定することで、コンポーネントを利用する際にPropsを指定しないとエラーになります。

<Senni id={1} text={'ID1'} />

実際の画面は下記です。

URL：localhost:3000 → localhost:3000/Senni

クエリパラメータでのReactページ遷移時の値渡し実装

次はクエリパラメータでの値の受け渡しです。

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

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

//遷移先
const Senni:React.VFC = () => {
  // クエリストリングdえ渡ってきたID
  const { id } = useParams()

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

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

export default App;

ルーティングは下記のように記載します。

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

URLの末尾にキーとなる要素を先に定義しておきます。

実際に使用する場合下記のようにURLを指定します。

// id＝1となる
<Link to="/Senni/1">遷移</Link>

コンポーネント内では下記の「useParams」を使用してクエリパラメータを取得します。

//遷移先
const Senni:React.VFC = () => {
  // クエリストリングdえ渡ってきたID
  const { id } = useParams()

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

URL：localhost:3000 → localhost:3000/Senni/1

State渡しでのReactページ遷移時の値渡し実装

次にState渡しです。こちらを使用する際は「useNavigator」を使用します。

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

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

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

//遷移先
const Senni= () => {
  // 値の取得
  const location = useLocation()
  const id = Number(location.state);

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

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

export default App;

先ほどのコードではLinkでのページ遷移をおこなっていましたが、ボタンアクションに変更しております。

ボタンアクションを記述している遷移前のページでは「useNavigate」を使ってページ遷移時にStateに値を格納しています。

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

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

値を受け取ったページ側では「useLocation」を用いて値を取得し、ページに表示しています。

//遷移先
const Senni= () => {
  // 値の取得
  const location = useLocation()
  const id = Number(location.state);

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

ReduxでのReactページ遷移時の値渡し実装

Reduxは初心者向けではないので同様に省略します。気になる方は下記記事を参考にしてみてください。

【React】Reduxの使い方ご紹介。〜 初心者向け 〜

Reactページ遷移時の値渡しまとめ

ご紹介した全ての方法は一長一短があるため、使用する上でどれを使用するかは考える必要がありそうです。

私個人の考えでは下記のような使い分けが最適かと思います。

  • 主キーなどの要素が必要な場合で、主キーに秘匿性がない → クエリパラメーター
  • 主キーなどの要素が必要な場合で、主キーに秘匿性がある（パスワードなど） → State渡し
  • ダイアログや共通部分のページ遷移 → Props渡し
  • 全ページなどに戻る際にデータを保持しておく必要がある → Redux

では今回の記事は以上です。他にも多数のReact関連の記事を記載しているので是非興味がある方はサイト内みて行ってください。

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

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

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

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

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

TypeScript
スポンサーリンク
シェアする
スポンサーリンク
ともぶろぐ
スポンサーリンク

コメント

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