Zenn
💬

【React】react-router-dom v6 ページ遷移 useRouter

2022/11/13に公開
JavaScript
React
tech

概要

react-router-domのv6からrouterの書き方が変わったようなので備忘録
404ページ（自動でトップページに戻る）処理も実装しました。

https://codesandbox.io/s/react-router-dom-v6-usenavigate-p2b4v8?file=/src/App.js

インストール

npm install react-router-dom

コード説明

作成するページ

今回は以下のページを作成します。
・Home
・Page1
・Page2
・Page404

Routesの設定

まずはApp.jsの説明をします。

App.js
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./Home";
import Page1 from "./Page1";
import Page2 from "./Page2";
import Page404 from "./Page404";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path={`/`} element={<Home />} />
        <Route path={`/Page1`} element={<Page1 />} />
        <Route path={`/Page2`} element={<Page2 />} />
        <Route path={`/*`} element={<Page404 />} />
      </Routes>
    </BrowserRouter>
  );
}

ここで各ページのURLを設定をします。
Routesの中に各ページのRouteを記述します。
pathは'/'がトップページになります。その他のページは好きなURLを記述しましょう。
後で説明しますが'/*'はURLがどこのページにも該当しない場合にそのページへ行きます。
elementには表示したいページのコンポーネントを設定しましょう。

ページ遷移

ページ遷移の方法を説明します。

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

const Home = () => {
  const navigate = useNavigate();

  const onClickPage1 = () => {
    navigate("/Page1");
  };

  const onClickPage2 = () => {
    navigate("/Page2");
  };

  const onClickPage404 = () => {
    // 適当なURLに飛んでみる
    const str = Math.random().toString(32).substring(2);
    navigate(`/${str}`);
  };

  return (
    <div className="Home">
      <h1>Home Page</h1>
      <button onClick={onClickPage1}>Page1</button>
      <p></p>
      <button onClick={onClickPage2}>Page2</button>
      <p></p>
      <button onClick={onClickPage404}>Page404</button>
    </div>
  );
};

export default Home;

Home.jsxの全体のコードは↑ですが、処理は同じことを各ページにやってるだけなので最初の方だけ見ればOKです。
ページの遷移にはuseNavigateを使います。
const navigate = useNavigate();でuseNavigateを使えるようにして、navigate(遷移先のURL)でページ遷移できます。
以上です。簡単でありがたい…

404ページ

最後に404ページの説明をします。
404ページに飛ぶ条件はサイトによって色々あると思いますが、今回は/Page1と/Page2以外のURLを入力された場合に飛ばしてみます。

App.js
export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path={`/`} element={<Home />} />
        <Route path={`/Page1`} element={<Page1 />} />
        <Route path={`/Page2`} element={<Page2 />} />
        <Route path={`/*`} element={<Page404 />} />
      </Routes>
    </BrowserRouter>
  );
}

最初の方で説明しましたが、Routeのpathに'/*'を設定するとどこのページにも該当しない場合にそのページへ行きます。今回はelementにPage404を設定しているので404ページに飛ぶということですね。

Home.jsx
const Home = () => {
  const navigate = useNavigate();

  const onClickPage404 = () => {
    // 適当なURLに飛んでみる
    const str = Math.random().toString(32).substring(2);
    navigate(`/${str}`);
  };

  return (
    <div className="Home">
      <h1>Home Page</h1>
      <button onClick={onClickPage404}>Page404</button>
    </div>
  );
};

↑はHome.jsxの404に飛ぶ処理だけ抜粋してます。
navigateに渡してるURLが適当な文字列なので偶然Page1やPage2の文字列が生成されない限りは404ページに飛びます。
もしくはcodesandboxで適当なURLを入力すると実際に404ページへ飛ぶのが確認できます。

最後に自動でトップページへ戻る処理を紹介します。

Page404.jsx
import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";

const Page404 = () => {
  const [time, setTime] = useState(3);
  const navigate = useNavigate();

  useEffect(() => {
    setTimeout(() => {
      const sec = time - 1;
      setTime(sec);
      if (sec === 0) {
        navigate("/");
      }
    }, 1000);
  });

  return (
    <div className="Page404">
      <h1>Page404</h1>
      {time}秒後自動でHomeへ移る
    </div>
  );
};

export default Page404;

色々試した結果こうなりましたが、〇秒後に戻る表示をカウントダウンしないならuseStateで時間持つ必要ないので↓のように簡単な処理になります。

const Page404 = () => {
  const navigate = useNavigate();

  useEffect(() => {
    setTimeout(() => {
        navigate("/");
    }, 3000);
  });

  return (
    <div className="Page404">
      <h1>Page404</h1>
      3秒後自動でHomeへ移る
    </div>
  );
};

以上です。

Discussion