Reactでログインしたら元々いたページに戻すやつ

useLocationで今いるページのパスを取得、useNavigateでページのパスを渡しながらログイン画面に飛ばして、ログインに成功したら先ほど渡されたパスに移動する。

具体的には、

npx create-react-app 云々 --template typescript

をした直後の状態として、App.jsxを以下のように書き換えるとなんとなく理解できる。

import React, { useState } from "react";
import {
  BrowserRouter,
  Routes,
  Route,
  Link,
  useLocation,
  useNavigate,
  Navigate,
} from "react-router-dom";

// トップページ
const TopPage = () => {
  return (
    <>
      <h2>トップページ</h2>
      {["a", "b", "c"].map((x: string, i: number) => {
        return (
          <p key={i}>
            ・<Link to={"/" + x}>{x}</Link>
          </p>
        );
      })}
    </>
  );
};

// コンテンツ
const Comp = () => {
  const location = useLocation();
  const navigate = useNavigate();
  return (
    <>
      <h2>コンテンツ</h2>
      私は今{location.pathname}にいます。
      <br />
      <button
        onClick={(e) => {
          navigate("/login", { state: location.pathname });
        }}
      >
        ログイン画面にリダイレクトするイメージ
      </button>
      <hr />
      <Link to="/">トップページ</Link>
    </>
  );
};

// ログイン画面
const Login = () => {
  const location = useLocation();
  const navigate = useNavigate();

  return (
    <>
      {location.state}から来たようだ
      <p>
        <button
          onClick={(e) => {
            let url: string = location.state as string;
            navigate(url);
          }}
        >
          ログイン
        </button>
      </p>
      <hr />
      <Link to="/">トップページ</Link>
    </>
  );
};

//
function App() {
  return (
    <>
      <BrowserRouter>
        <Routes>
          <Route path="/login" element={<Login />} />
          <Route path="/a" element={<Comp />} />
          <Route path="/b" element={<Comp />} />
          <Route path="/c" element={<Comp />} />
          <Route path="/" element={<TopPage />} />
        </Routes>
      </BrowserRouter>
    </>
  );
}

export default App;