React注册页报useHref()需在<Router>组件上下文内使用错误

你遇到的useHref() may be used only in the context of a <Router> component报错和Firebase鉴权逻辑无关，完全是注册页路由跳转的写法错误导致的，核心问题有2个：

• 错误使用路由组件做跳转：代码中写的Route.push("/dashboard")是无效写法，Route是react-router-dom提供的路由规则定义组件，本身不存在push方法，错误调用该组件的静态属性会触发内部路由钩子的上下文校验，直接抛出上下文缺失错误。
• 冗余导入+未正确使用路由钩子：你虽然导入了useHistory跳转钩子，但从未调用它获取路由实例；同时导入了当前页面完全没用到的firebase/database的push方法、Route组件，存在不必要的命名冲突风险。
  其他登录功能正常运行，是因为对应页面没有这类错误的路由调用写法，应用整体的Router上下文包裹是正常的。

1. 清理无用导入：删除当前页面未使用的Route（来自react-router-dom）、push（来自firebase/database）导入。
2. 正确调用useHistory钩子获取路由实例，替换错误的跳转逻辑。
3. 补全注册逻辑的边界判断：未输入用户名时弹出提示后直接终止注册流程，避免后续无效请求。

import React, { useEffect, useState } from "react";
import { useAuthState } from "react-firebase-hooks/auth";
import { Link, useHistory } from "react-router-dom";

import {
  auth,
  registerWithEmailAndPassword,
  signInWithGoogle,
} from "../config/firebase";

function Register() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [name, setName] = useState("");
  const [user, loading, error] = useAuthState(auth);
  // 正确获取路由跳转实例
  const history = useHistory();

  const register = () => {
    if (!name) {
      alert("Please enter name");
      // 未填姓名时终止后续注册逻辑
      return;
    }
    registerWithEmailAndPassword(name, email, password);
  };

  useEffect(() => {
    if (loading) return;
    // 替换错误的Route.push为正确的history跳转
    if (user) history.push("/dashboard");
  }, [user, loading, history]);

  return (
    <div className="register">
      <div className="register__container">
        <input
          type="text"
          className="register__textBox"
          value={name}
          onChange={(e) => setName(e.target.value)}
          placeholder="Full Name"
        />
        <input
          type="text"
          className="register__textBox"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder="E-mail Address"
        />
        <input
          type="password"
          className="register__textBox"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          placeholder="Password"
        />
        <button className="register__btn" onClick={register}>
          Register
        </button>
        <button
          className="register__btn register__google"
          onClick={signInWithGoogle}
        >
          Register with Google
        </button>
        <div>
          Already have an account? <Link to="/">Login</Link> now.
        </div>
      </div>
    </div>
  );
}
export default Register;

保存修改后刷新页面重试，注册成功后即可正常跳转到仪表盘页面，不会再触发路由上下文相关报错。

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