【React】学習ロードマップ take5 ~useNavigate~

概要
準備
実装
まとめ
他Tips
1. 関連

概要

Reactでページ遷移を実装します。

React Router のバージョン5 までは、useHistoryが利用可能でしたが、React Router バージョン6 からは廃止されました。

そのため、React Router バージョン6 以降はuseNavigateを使う必要があります。

準備

実際にローカルで動くプロジェクトを作成します。

任意のディレクトリでこちらのコマンドを順番に叩いてください。

// React の開発に必要な基本的な設定を含むプロジェクト構造を作成
$ npx create-react-app hoghogeApp

// 作成したプロジェクトに移動する
$ cd hoghogeApp

// 開発サーバーを起動し、ブラウザで React アプリケーションを開く
$ npm start

または、下記リンクからSandboxを開いて簡易的に動作環境を準備します。

https://codesandbox.io/p/sandbox/react-new

実装

useNavigateを使うと、このようなソースコードを書くことができます。

ここでは、DetailAボタンをクリックすると、Page1DetailAページに遷移するように実装しています。

Page1.jsx
-----------------------------------------------
import { useNavigate } from "react-router-dom";

export const Page1 = () => {
  const navigate = useNavigate();

  const onClickDetailA = () => navigate("/page1/detailA");

  return (
    <div>
      <h1>Page1ページです</h1>
      <button onClick={onClickDetailA}>DetailA</button>
    </div>
  );
};

Page1DetailA.jsx
-----------------------------------------------
export const Page1DetailA = () => {
  return (
    <div>
      <h1>Page1DetailAページです</h1>
    </div>
  );
};

DetailAボタンをクリックします。