React開発 React-Router v5で画面遷移してみる

はじめに

React学習中のHinanoです。
最近までUdemyの動画を通してインプット中心で学習を進めており、アウトプットもしなければ...とReactでの開発を進めています。そんな中、画面遷移の方法がReact-Router v5とv6では少しだけ異なることが分かりました。（私はそのことに気づくまでだいぶ時間がかかりました💦）
同じReact 学習中の方の力になれればと思います！

変更点

React Router v5では

useHistory　+ useParams ( useHistory + useLocation )

React Router v6では

useNavigata + useParams ( useNavigata + useLocation )

それぞれのフックの役割

• useHistory

  指定したリンクに飛ばす役割を持つ。ブラウザの進む、戻るといったナビゲーション機能をコンポーネント内から操作できる。

• useParams

  ルーティングパラメータの取得。URLから情報の抽出をしたり、`:id`のように指定したパラメーターから取得する。

• useLocation

　現在のURLを参照できる。URLパス、クエリパラメーター、ハッシュなどの情報の取得、
　現在のURLの変更に使える。

• useNavigata

  v６からはuseHistoryに代わってuseNavigataが導入された。主にページ遷移、履歴の管理を行う。

React Router v5

useHistory + useParamsの場合

送信元コンポーネント

import { useHistory } from 'react-router-dom';

function SenderComponent() {
  const history = useHistory();

  const handleClick = () => {

    history.push('/receiver/123'); // receiverコンポーネントにid(123)を渡す
  };

  return (
    <div>
      <button onClick={handleClick}>情報を送る</button>
    </div>
  );
}

受信先コンポーネント

import { useParams } from 'react-router-dom';

function ReceiverComponent() {
  const { id } = useParams();
  return (
    <div>
     <h1> 受け取った情報: {id}</h1>
    </div>
  );
}

useHistory+useLocationの場合

送信元コンポーネント

import { useHistory } from 'react-router-dom';

function SenderComponent() {
  const history = useHistory();

  const handleClick = () => {
  
    history.push({
      pathname: '/receiver', //遷移先
      search: '?info=example',//パラメーターとして情報を渡す
    });
  };

  return (
    <div>
      <button onClick={handleClick}>情報を送る</button>
    </div>
  );
}

受信先コンポーネント

import { useLocation } from 'react-router-dom';

function ReceiverComponent() {
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);
  const info = queryParams.get('info');

  return (
    <div>
      <h2>受け取った情報: {info}</h2>
    </div>
  );
}

React Router v6

useNavigata+useParamsの場合

受信元コンポーネント

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

function NavigationComponent() {
  const navigate = useNavigate();

  const handleClick = () => {
    // ボタンがクリックされたときに新しいページに遷移し、IDをパスパラメーターとして渡す
    navigate(`/receiver/123`); // 例えばIDが123の場合
  };

  return (
    <div>
      <button onClick={handleClick}>情報を送る</button>
    </div>
  );
}

受信先コンポーネント

import { useParams } from 'react-router-dom';

function ReceiverComponent() {
  const { id } = useParams();

  return (
    <div>
      <h2>受け取った情報: {id}</h2>
    </div>
  );
}

useNavigata+useLocationの場合

送信元コンポーネント

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

function SenderComponent() {
  const navigate = useNavigate();

  const handleClick = () => {
    // ボタンがクリックされたときに新しいページに遷移し、情報をクエリパラメーターとして渡す
    navigate(`/receiver?message=成功&type=success`);
  };

  return (
    <div>
      <button onClick={handleClick}>情報を送る</button>
    </div>
  );
}

送信先コンポーネント

import { useLocation } from 'react-router-dom';

function ReceiverComponent() {
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);
  const message = queryParams.get('message');
  const type = queryParams.get('type');

  return (
    <div>
      <h2>受け取った情報:</h2>
      <p>メッセージ: {message}</p>
      <p>タイプ: {type}</p>
      {/* 情報に基づいた他の処理を行う */}
    </div>
  );
}

まとめ

useHistoryとuseNavigataでは使用方法にそんな大きな差はないことがわかりました。
今回の学習を通して様々なフックに触れることができたと思います。
この調子でreactについて理解を深めていこうと思います！