Apps

012-Login+Graph｜Step7_React×FastAPI：登録成功・失敗画面を作成する

はじめに

ユーザー登録の成功・失敗を適切にフィードバックすることは、良いユーザー体験（UX） につながります。

本記事では、新規登録の結果に応じた成功画面・エラーページ の作成方法を解説します。

1. 登録成功画面の作成

新規登録が成功した場合、ユーザーに 「登録完了」 のメッセージを表示し、ログイン画面へのリンクを提供します。

📂 components/pages/RegisterSucceeded.js

import React from 'react';
import { Container, Typography, Box } from '@mui/material';
import { useLocation, Link } from 'react-router-dom';

const RegisterSucceeded = () => {
    const { state } = useLocation(); // 送られてきたstateを取得

    return (
        <Container maxWidth="xs">
            <Box
                sx={{
                    marginTop: 8,
                    display: "flex",
                    flexDirection: "column",
                    alignItems: "center",
                }}
            >
                <Typography variant='h5'>登録完了しました</Typography>
                <Typography variant='h5'>名前：{state?.username || "不明"}</Typography>
                <Link to="/login">ログイン画面へ</Link>
            </Box>
        </Container>
    );
};

export default RegisterSucceeded;

📌 useLocation を使用
state から登録したユーザー名 (username) を取得して表示します。
state?.username || "不明" のように書くことで、state が undefined でもエラーになりません。

2. 登録失敗画面の作成

登録に失敗した場合、ユーザーに 「登録失敗」 のメッセージを表示し、ログイン画面へのリンクを提供します。

📂 components/pages/RegisterFailed.js

import React from 'react';
import { Container, Typography, Box } from '@mui/material';
import { useLocation, Link } from 'react-router-dom';

const RegisterFailed = () => {
    const { state } = useLocation(); // 送られてきたstateを取得

    return (
        <Container maxWidth="xs">
            <Box
                sx={{
                    marginTop: 8,
                    display: "flex",
                    flexDirection: "column",
                    alignItems: "center",
                }}
            >
                <Typography variant='h5'>登録失敗しました</Typography>
                <Typography variant='h5'>名前：{state?.username || "不明"}</Typography>
                <Link to="/login">ログイン画面へ</Link>
            </Box>
        </Container>
    );
};

export default RegisterFailed;

📌 state を使用して、エラーが発生したユーザー名を表示
ただし、エラーメッセージが適切に伝わるように、FastAPI 側で適切なレスポンスを返すようにするのが重要です。

3. ルーティングの設定

作成した成功・失敗ページにアクセスできるように、App.js にルーティングを追加します。

📂 src/App.js

import RegisterSucceeded from './components/pages/RegisterSucceeded'; // 登録成功画面
import RegisterFailed from './components/pages/RegisterFailed'; // 登録失敗画面

function App() {
  return (
    <LoginUserProvider>
      <div className='App'>
        <Routes>
          {/* 他のルート */}
          <Route path='/registersucceeded' element={<RegisterSucceeded />} /> {/* 登録成功ページ */}
          <Route path='/registerfailed' element={<RegisterFailed />} /> {/* 登録失敗ページ */}
          {/* 他のルート */}
        </Routes>
      </div>
      <Footer />
    </LoginUserProvider>
  );
}

export default App;

4. 新規登録後にリダイレクトする処理

ユーザーが新規登録を試みた後、成功した場合は /registersucceeded へ、失敗した場合は /registerfailed へリダイレクトする必要があります。

Register.js で登録処理を実装する際に、以下のように設定すると、成功・失敗の画面に遷移できます。

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

// フォーム送信イベント
const handleRegister = async () => {
    const response = await fetch("http://localhost:8000/register", {
        method: "POST",
        body: JSON.stringify({ username, password }),
        headers: { "Content-Type": "application/json" },
    });

    if (response.ok) {
        navigate("/registersucceeded", { state: { username } });
    } else {
        navigate("/registerfailed", { state: { username } });
    }
};

📌 useNavigate を使用して画面遷移
state に username を含めて送信することで、遷移先で state.username を表示できます。

まとめ

本記事では、ユーザー登録の成功・失敗を適切にフィードバックする画面 を作成しました。

✅ 登録成功画面 (RegisterSucceeded.js) の作成
✅ 登録失敗画面 (RegisterFailed.js) の作成
✅ App.js にルーティングを追加
✅ 登録後に成功・失敗画面へリダイレクトする処理を実装

-Apps