畫面做得差不多時，開始串登入功能，沒想到註冊頁面也出事，個花了一整晚才找出了解法…

Firebase Authentication FirebaseNetworkException: A network error (such as timeout, interrupted connection or unreachable host) has occurred

很多網路上的人都有遇到這樣的問題，但解法卻很少，挖了很多資料終於找到一個(連結)，但原理我還是找不到解答...，如果有人知道的話可以留言造福大家!!

這是我原本的寫法

function Signup(){
    //--略
    return(
        <main data-page="-">
           //--略
            <section className="form_section">
                <div className="container">
                    <form onSubmit={onSubmit}>
                        //--略
                        <div className="form-group">
                            <label className="form-label" htmlFor="email">帳號<span>*</span></label>
                            <input className="form-input" id="email" type="email" placeholder="請輸入您常用的Email" value={email} onChange={(e) => {setEmail(e.target.value)	}}/>
                            <small>請輸入正確的Email格式</small>
                        </div>
                        <div className="form-group">
                            <label className="form-label" htmlFor="password1">密碼設定<span>*</span></label>
                            <input className="form-input" id="password1" type="password" placeholder="至少6字元以上" value={password} onChange={ (e) => {setPassword(e.target.value)}}/>
                            <small>至少6字元以上</small>
                        </div>
                       
                        <div className="btnwrap">
                            <input className="btn blue" type="submit" value="註冊" />
                        </div>
                    </div>
                </div>
            </section>
        </main>
    )
}

後來把form改成div，input換成加上onSubmit的a，這個報錯就消失了!!

function Signup(){
    //--略
    return(
        <main data-page="-">
           //--略
            <section className="form_section">
                <div className="container">
                    <div>
                        //--略
                        <div className="form-group">
                            <label className="form-label" htmlFor="email">帳號<span>*</span></label>
                            <input className="form-input" id="email" type="email" placeholder="請輸入您常用的Email" value={email} onChange={(e) => {setEmail(e.target.value)	}}/>
                            <small>請輸入正確的Email格式</small>
                        </div>
                        <div className="form-group">
                            <label className="form-label" htmlFor="password1">密碼設定<span>*</span></label>
                            <input className="form-input" id="password1" type="password" placeholder="至少6字元以上" value={password} onChange={ (e) => {setPassword(e.target.value)}}/>
                            <small>至少6字元以上</small>
                        </div>
                       
                        <div className="btnwrap">
                            <a className="btn blue" href="#" onClick={onSubmit}>註冊 <span></span></a>
                            {/* <input className="btn blue" type="submit" value="註冊" /> */}
                        </div>
                    </div>
                </div>
            </section>
        </main>
    )
}

A future version of React will block javascript

另一個小問題就是之前都會在a的href寫上javascript;，拿掉他錯誤就會消失，可以再改寫成#。

//React中錯誤寫法
<a href="javascript:;" ...>...</a>
//改寫
<a href="#" ...>...</a>
//官方的文件: 都是綁定的方式，沒有出現javascript:
<a
  href={url}
  style={style}
  className={classNameString}
  onClick={onClick}
  rel='noopener noreferrer'
>    
</a>

解問題解太久，今天進度就先這樣吧~