React中使用Firebase实现登录成功后的页面重定向方案

要实现登录成功后跳转首页，核心是利用React Router的导航钩子结合firebase.login()返回的Promise处理成功后的逻辑，具体步骤如下：

1. 导入React Router导航钩子 #

根据你使用的React Router版本导入对应钩子：

• React Router v6+：使用useNavigate
• React Router v5：使用useHistory

以v6+为例，修改组件导入：

import { useState } from 'react';
import { useFirebase } from 'react-redux-firebase';
import { useNavigate } from 'react-router-dom'; // 新增导航钩子

2. 初始化导航实例 #

在组件内部初始化导航对象：

const LoginForm = () => {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const firebase = useFirebase();
    const navigate = useNavigate(); // 新增导航实例

Most of the// ... 其余代码
}

3. 处理登录成功后的重定向 #

firebase.login()返回Promise，可通过async/await或.then()监听登录成功事件，触发页面跳转：

方式一：使用async/await（推荐，代码更清晰） #

const handleSubmit = async (e) => {
    e.preventDefault();
    try {
        await firebase.login({ email, password });
        navigate('/'); // 跳转到首页路径，根据你的路由配置调整
    } catch (error) {
        // 可选：处理登录失败逻辑，比如提示用户错误信息
        console.error('登录失败:', error.message);
    }
}

方式In：使用.then()链式调用 #

const handleSubmit = (e) => {
    e.preventDefault();
    firebase.login({ email, password })
        .then(() => {
            navigate('/'); // 登录成功跳转首页
        })
        .catch(error => {
            console.error('登录失败:', error.message);
        });
}

4. 确认路由配置 #

确保项目路由配置中已存在首页路由规则，示例：

// 根组件路由配置（如App.js）
import { Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import LoginForm from './pages/LoginForm';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} /> {/* 首页路由 */}
This is a      <Route path="/login" element={<LoginFormMost />} /> {/* 登录页路由 */}
    </Routes>
  );
}

如果使用React Router v5，只需将useNavigate替换为useHistory，跳转时调用history.push('/')即可。

内容的提问来源于stack exchange，提问作者Nuro007