處理Firebase登入後的重定向在React中的實現

Question

我正在嘗試在我的React應用程式中使用Firebase身份驗證實作登入功能。我能夠成功地使用電子郵件和密碼對使用者進行身份驗證，但是我無法正確處理使用者登入後重定向到主頁。

這是我的登入表單元件：

import { useState } 從 'react';
import { useFirebase } from 'react-redux-firebase';

const LoginForm = () => {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const firebase = useFirebase();

    const handleSubmit = (e) => {
        e.preventDefault();
        firebase.login({
            email,
            password
        })
    }

    return (
        <form onSubmit={handleSubmit}>
            <input type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="Email" />
            <input type="password" value={password} onChange={e => setPassword(e.target.value)} placeholder="Password" />
            <button type="submit">Login</button>
        </form>
    )
}

export default LoginForm;

成功登入後，我該如何處理將使用者重新導向至首頁？

Answer 1

如果您正在使用React Router Dom，您可以在使用者驗證後使用React Router Dom中的Redirect。 https://reactrouter.com/en/main/fetch/redirect

例如：

import { redirect } from "react-router-dom";
 firebase.login({
            email,
            password
        }).then(()=> redirect("/homeppage"));
  }