React注册成功后props.history.push无法跳转登录页问题

props.history.push("/login") 不生效是因为你的Register组件没有拿到React Router注入的history路由对象，调用不存在的方法自然不会触发跳转。
从代码来看，你直接导出了原生的Register组件，没有做路由props注入，通常是两种情况导致的：

• Register组件不是通过Route路由规则渲染的，是你直接在其他组件里写<Register />引入的，这种场景下React Router不会自动注入路由props
• 你使用的React Router版本是v6，v6版本默认不再给普通组件注入路由相关props，必须主动通过钩子或者高阶组件获取

根据你用的React Router版本选对应方案即可。

方案1：函数组件优先用路由钩子（v5/v6通用思路） #

你写的是函数组件，直接调用官方提供的路由钩子拿跳转方法最方便，完全不用依赖props传递，也不用关心组件是不是被Route直接渲染的。

• 如果你用的是React Router v5.x：
  首先修改导入语句，引入useHistory：

  import { Link, useHistory } from "react-router-dom";
  

  然后在组件内部调用钩子拿到history实例，替换原来的props.history调用：

  const Register = () => {
    const history = useHistory();
    const [data, setData] = useState({
      name: "",
      email: "",
      password: ""
    })
    const { name, email, password } = data;
    const handleChange = (e) => {
      setData({ ...data, [e.target.name]: e.target.value });
    };
    const handleSubmit = async (e) => {
      e.preventDefault();
      try {
        await axios.post(
          "/auth/register", { name, email, password }, {
          headers: {
            "Content-Type": "application/json",
          },
        }
        );
        history.push("/login");
      } catch (err) {
        console.log(err);
      }
    };
    // 原有JSX返回逻辑保持不变
  }
  
  export default Register
  

• 如果你用的是React Router v6.x：
  v6版本移除了useHistory，换成了useNavigate钩子，用法类似：
  首先修改导入：

  import { Link, useNavigate } from "react-router-dom";
  

  组件内调用：

  const Register = () => {
    const navigate = useNavigate();
    // 其余state、表单处理逻辑保持不变
    const handleSubmit = async (e) => {
      e.preventDefault();
      try {
        await axios.post("/auth/register", { name, email, password }, {
          headers: {
            "Content-Type": "application/json",
          },
        });
        navigate("/login");
      } catch (err) {
        console.log(err);
      }
    }
    // 原有JSX返回逻辑保持不变
  }
  

方案2：用高阶组件注入路由props（仅v5适用） #

如果你不想改组件内的逻辑，就想用props.history的写法，可以用React Router内置的withRouter高阶组件包裹组件导出，自动给组件注入路由props。
首先修改导入：

import { Link, withRouter } from "react-router-dom";

然后修改导出语句：

// 替换原来的 export default Register
export default withRouter(Register);

如果改完还是不跳转，检查两个容易漏的点：

• 确认路由表中已经配置了/login路径对应的页面组件，否则跳转后会显示空白，看起来像没生效
• 确认注册接口真的返回了成功响应：如果接口返回400、500这类错误码，会直接进入catch分支，不会执行后面的跳转逻辑，可以在push/navigate调用前加一行日志，确认代码执行到了这一步

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