React中Firebase登录后点击按钮实现页面跳转的方法

AI 小北

2026-8-15

登录成功后跳转页面的解决方案

在React项目中结合Firebase Auth实现登录后跳转，最适配的方案是使用React Router提供的useNavigate钩子——它能在登录请求完成后手动触发项目内页面跳转，不会打断Firebase的认证流程。

具体实现步骤：

导入useNavigate钩子
在组件文件顶部导入React Router的useNavigate：
```
import { useNavigate } from 'react-router-dom';
```
初始化navigate函数
在组件内部调用useNavigate获取跳转方法：
```
const navigate = useNavigate();
```

在登录成功回调中触发跳转
修改toggleSignIn函数，在signInWithEmailAndPassword的then回调里调用navigate，跳转到目标页面的路由路径：

function toggleSignIn(e) {
    e.preventDefault();
    signInWithEmailAndPassword(auth, email, password)
      .then((response) => {
        console.log(response);
        // 登录成功后跳转到CardsTabs页面
        navigate('/CardsTabs');
      })
      .catch(function(error) {
        var errorCode = error.code;
        var errorMessage = error.message;
        if (errorCode === "auth/wrong-password") {
          alert("Wrong password.");
        } else {
          alert(errorMessage);
        }
        console.log(error);
      });
  }

移除按钮上无效的to属性
原按钮上的to是Link组件的专属属性，普通button标签不识别，直接删除即可：
```
<button
    type="submit"
    onClick={toggleSignIn}
>
    Giriş Yap
</button>
```

注意事项：

确保项目已配置React Router，且CardsTabs组件已在路由规则中注册，比如路由配置文件中有类似代码：

import { Routes, Route } from 'react-router-dom';
import CardsTabs from './path/to/CardsTabs';

function App() {
  return (
    <Routes>
      {/* 其他路由 */}
      <Route path="/CardsTabs" element={<CardsTabs />} />
    </Routes>
  );
}