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

## はじめに

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

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

+ <h3>useParams</h3>
  ルーティングパラメータの取得。URLから情報の抽出をしたり、`:id`のように指定したパラメーターから取得する。
  
+ <h3>useLocation</h3>
　現在のURLを参照できる。URLパス、クエリパラメーター、ハッシュなどの情報の取得、
 　現在のURLの変更に使える。

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

## React Router v5
useHistory + useParamsの場合

<h3>送信元コンポーネント</h3>

```jsx
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>
  );
}
```

<h3>受信先コンポーネント</h3>

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

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

useHistory+useLocationの場合

<h3>送信元コンポーネント</h3>

```jsx
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>
  );
}

```
<h3>受信先コンポーネント</h3>

```jsx
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の場合

<h3>受信元コンポーネント</h3>

```jsx
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>
  );
}
```

<h3>受信先コンポーネント</h3>

```jsx

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

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

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

useNavigata+useLocationの場合

<h3>送信元コンポーネント</h3>

```jsx

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>
  );
}
```
<h3>送信先コンポーネント</h3>

```jsx

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について理解を深めていこうと思います！