React类组件登录回调后如何实现URL导航？多种方法尝试无效

你的核心问题是类组件的异步回调无法触发React Router编程式导航：useNavigate是Hook不能在类组件中使用，Link/Redirect只有在render阶段渲染才会生效。下面是针对不同React Router版本的可行解决方案：

方案1：React Router v5 使用withRouter高阶组件 #

React Router v5提供的withRouter高阶组件，可以将路由相关的history、location等对象注入类组件的props中：

1. 修改导入语句，加入withRouter并移除无用的Hook导入：

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

2. 用withRouter包裹组件导出：

export default withRouter(Login);

3. 在data_login_callback中使用history.push实现跳转：

data_login_callback(response) {
    fetch("http://localhost:5000/google_login", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(response),
    })
    .then((res) => res.json())
    .then((json) => {
        console.log(json);
        if (json.status === "OK") {
            this.props.history.push(json.Redirect);
        }
    });      
}

方案2：React Router v6 自定义withRouterHOC #

React Router v6移除了官方的withRouter，需要自己实现一个简单的HOC传递navigate函数：

1. 先定义自定义withRouter：

import { useNavigate, useLocation, useParams } from 'react-router-dom';

const withRouter = (Component) => {
  const Wrapper = (props) => {
    const navigate = useNavigate();
    const location = useLocation();
    const params = useParams();
    return <Component {...props} navigate={navigate} location={location} params={params} />;
  };
  return Wrapper;
};

2. 用这个HOC包裹Login组件导出：

export default withRouter(Login);

3. 在回调中使用navigate跳转：

data_login_callback(response) {
    fetch("http://localhost:5000/google_login", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(response),
    })
    .then((res) => res.json())
    .then((json) => {
        console.log(json);
        if (json.status === "OK") {
            this.props.navigate(json.Redirect);
        }
    });      
}

方案3：直接使用浏览器原生API（简单但不推荐） #

如果不需要保留React Router的单页应用状态，可以直接用浏览器location API跳转（会刷新页面）：

if (json.status === "OK") {
    window.location.href = json.Redirect;
    // 用replace避免回退到登录页：window.location.replace(json.Redirect);
}

额外优化点 #

• 移除代码中无用的rend方法和useState/useContext导入
• 你已经在constructor中绑定了data_login_callback的this指向，无需额外调整

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