終於到了登出功能，以為能夠一次成功的，殊不知又出現錯誤了:-(

Invalid hook call. Hooks can only be called inside of the body of a function component.

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

function Header(){
    //--略
    function signOut(){
	    firebase.auth().signOut().then(() => {
		    useNavigate('/')
	     }).catch((error) => {
	      console.log(error)
	    });
    }
    return(
        <header className={menuToggle ? 'navbar open' : 'navbar'} >
            //--略
		        <li>
                <Link to="#" onClick={signOut}>登出</Link>
            </li>
           //--略
        </header>
    )
}

把函式直接寫入onColick裡面就可以解決上面出現的報錯問題。

function Header(){
    return(
        <header className={menuToggle ? 'navbar open' : 'navbar'} >
            //--略
		        <li>
                <Link to="#" onClick={()=>firebase.auth().signOut()}>登出</Link>
            </li>
           //--略
        </header>
    )
}

原因是這樣的…

//第一種方式 — 他是在點擊後直接執行函式
onClick={signOut}
onClick = function() {
   firebase.auth().signOut()
}
//可以看做是
onClick = function() {
   firebase.auth().signOut()
}

//第二種方式 — 式箭頭函式點擊後會去調用上面的函式
onClick = {() => this.signOut()}
//可以看做是
onClick = function() {
  return function signOut() {
    firebase.auth().signOut()
  };
}

這裡有官方文件與一篇文章可以參考