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

useNavigate React

概要

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ボタンをクリックします。

このような画面に遷移したら、無事機能していることになります。

まとめ

いかがでしたでしょうか。

React Router バージョン6がリリースされ、だいぶ経ちますがこの辺りは難なく対応できるようにしておきたいですね。

また良いTipsを見つけたら共有していこうと思います!

他Tips

元記事

前の記事

コメント

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