React ChakraUIで、「ログインしました」や「ログインに失敗しました」などToastが表示できない

はじめに

長時間はまったので記事にします。

問題

「ログインしました」や「ログインに失敗しました」など、一時的なメッセージを表示ができませんでした

解決方法

/src/hooks/useAuth.ts

/src/hooks/useAuth.ts

//toaster.create〜を仕込む


export const useAuth = () => {
    const navigate = useNavigate();
    const [loading, setLoading] = useState(false);

    const login = useCallback((id: string) => {
        setLoading(true);
        axios
            .get<User>(`https://jsonplaceholder.typicode.com/users/${id}`)
            .then((res) => {
                if (res.data) {
                    toaster.create({
                        description: "ログインしました",
                        type: "success",
                    });
                    navigate("/home");
                } else {
                    toaster.create({
                        description: "ユーザーが見つかりませんでした",
                        type: "error",
                    });
                }
            })
            .catch(() => {
                toaster.create({
                    description: "ログインに失敗しました",
                    type: "error",
                });
            })
            .finally(() => setLoading(false));
    }, [navigate]);

    return { login, loading,};
};

src/App.tsx

src/App.tsx

import { Toaster } from "@/components/ui/toaster"

const App = () => {
    return (
        <>
            <Provider>
                <Box>
                    {/* Toasterを設置 */}
                    <Toaster />
                    <RouterProvider router={Router} />
                </Box>
            </Provider>
        </>
    )
};

export default App;

<Toaster />と、
toaster.create({ title: "Toast Title", description: "Toast Description", })
を、同じファイル内で記述しなければならないと思い込んでしまっていました。

また、srcの中の、Login.tsxにを仕込んだところ、
「ログインに失敗しました」は出るものの、
「ログインしました」は出なくて困っていましたが、
navigate("/home")で移動してしまっているので出なくて当たり前でした。
(App.tsxに書かなければならない)

おわりに

終わってみればそれほど難しくなかったですが、長時間かかってしまいました。
処理の流れを正確に理解する必要があると思いました。

参考