reactでuseNavigateを使ったメソッド名でエラーが出る

Question

reactでログイン画面の作成をしています。
react-router-domはv6です。

useNavigateを読み込んで、login後home('/')に遷移させたいのですが、下記エラーが出ます。

React Hook "useNavigate" is called in function "signup" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use"

import React, { useEffect, useState } from "react";
import {auth} from "../firebase/firebase";
import { useNavigate } from 'react-router-dom';

const AuthContext = React.createContext()
const AuthProvider = ( { children }) => {
    const [currentUser, setCurrentUser] =useState(null);

    const signup = async ( email, password ) =>{
        try{
            const navigate = useNavigate();
            await auth.createUserWithEmailAndPassword( email, password );
            auth.onAuthStateChanged( user => setCurrentUser(user));
            navigate('/');
        }
        catch( error ) {
            alert( error );
        }
    }

const login = async ( email, password ) =>{
    try{
        const navigate = useNavigate();
        await auth.signInWithEmailAndPassword( email ,password );
        auth.onAuthStateChanged( user => setCurrentUser( user ));
        navigate('/');
    } catch( error ){
        console.log( error );
    }
}
useEffect(() =>{
    auth.onAuthStateChanged( setCurrentUser );
}, []);

return(
    <AuthContext.Provider value={{ signup, login, currentUser}}>
        {children}
    </AuthContext.Provider>)
}
export {AuthContext, AuthProvider}

フックを使用したメソッド名はuseから始めているし、頭文字を大文字に変更してもエラーは変わらず、もし解決方法をご存知の方がいらっしゃいましたら、回答いただけますと大変助かります。

Comments

[hoshi-takanori]

フック関数は関数コンポーネントから呼ぶ必要がありますが、signup や login はコンポーネントとは独立して呼ばれる関数だからかと。const navigate = useNavigate(); を AuthProvider から直接呼べば良いのでは。

[Kome314]

エラーを勘違いしており、おっしゃっていただいた通りフック関数の書く場所が誤っていました。修正したところ、問題解決しました。
ありがとうございます！

Answer 1

useNavigateをuseStateの下に記述することで解決しました。コメントいただいた方、ありがとうございました。