useNavigate+useLocation でデータの受け渡し【React】

React

2023.08.112023.10.04

はじめに
前提条件
ベースプログラム
ベースプログラムの動作
やりたいこと
変更後のプログラム
1. 変更部分について
ページ動作
おわりに

はじめに

前回は React のフックを簡単にまとめました。

今回は、useNavigation + useLocation でデータの受け渡し方法を説明していきます。

以下サイト様を参考にさせていただきました。

【React】React Router v6でのuseNavigateでのStateの渡し方

前提条件

前提条件は以下の通りです。

Windows11
React がインストールされている
react-create-app を使用してパッケージが作成されている
react-router-dom が使用できる

ベースプログラム

ファイル構成は以下のようになります。

App.js
components/Home.js
components/NextPage.js

App.js

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./components/Home";
import NextPage from "./components/NextPage";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/home" element={<Home />}></Route>
        <Route path="/next-page" element={<NextPage />}></Route>
      </Routes>
    </Router>
  )
};

export default App;

Home.js

import React from 'react'
import { useNavigate } from 'react-router-dom'

const Home = () => {

  const navigate = useNavigate();

  const handleClick = () => {
    navigate("/next-page");
  }

  return (
    <div>
      <button onClick={handleClick}>Homeeeeeeeeeeeeeeeeeeee</button>
    </div>
  )
}

export default Home;

NextPage.js

import React from 'react'

const NextPage = () => {
  return (
    <div>
      Next Page
    </div>
  )
}

export default NextPage

ベースプログラムの動作

localhost:3000/home は以下の画面です。

localhost:3000/next-page は以下の画面です。

やりたいこと

ベースプログラムでは、データの受け渡し方法がここで説明した sessionStorage しかありません。

今回は useNavigation でデータを渡し、useLocation でデータを受け取る方法について説明します。

変更後のプログラム

Home.js

import React from 'react'
import { useNavigate } from 'react-router-dom'

const Home = () => {

  const navigate = useNavigate();

  const handleClick = () => {
    navigate("/next-page", {state:{pageData: "hello!!"}});
  }

  return (
    <div>
      <button onClick={handleClick}>Homeeeeeeeeeeeeeeeeeeee</button>
    </div>
  );
};

export default Home;

NextPage.js

import React, { useEffect, useState } from 'react'
import { useLocation } from 'react-router-dom'

const NextPage = () => {
  const [data, setData] = useState("");
  const location = useLocation();

  useEffect(()=>{
    setData(location.state.pageData);
  }, [location]);

  return (
    <div>
      this is page data: {data}
    </div>
  );
};

export default NextPage;

変更部分について

Home.js

navigate("/next-page", {state:{pageData: "hello!!"}});

navigate の第二引数に state 辞書で pageData を渡します。複数渡すことも可能です。

NextPage.js

const [data, setData] = useState("");
  const location = useLocation();

  useEffect(()=>{
    setData(location.state.pageData);
  }, [location]);

useEffect を使用してページロード時に一度だけデータを読み込みます。
location.state.pageData が実際に受け取るデータです。

ページ動作

localhost:3000/home

localhost:3000/next-page

無事に hello が表示されました。

直接 localhost:3000/next-page に飛ぶと、navigate の state を取得することができず、エラーが吐かれます。

おわりに

今回は、useNavigate を使用して、ページ間でデータの受け渡し方法を説明しました。

これを使えば sessionStorage にデータを格納することなくデータを受け渡すことが可能になります。

次回はQRコードリーダーを作成していきます。