React18中Google Sign In登录成功后无法重定向页面如何解决？

问题现象 #

• 项目中接入Google登录能力，点击登录按钮完成Google账号授权流程后，页面未执行预期的路由跳转，无明确报错信息，无法定位问题根因。

关联代码 #

Login.jsx 登录页实现 #

import React from 'react';
import { GoogleLogin } from 'react-google-login';
import { GoogleLogout } from 'react-google-login';
import { createRoot } from 'react-dom/client';
import { useNavigate } from 'react-router-dom';
import { FcGoogle } from 'react-icons/fc';
import shareVideo from '../assets/share.mp4';
import logo from '../assets/logowhite.png';

import { client } from '../client';

const Login = () => {

  const navigate = useNavigate();

  const responseGoogle= (response) => {
    localStorage.setItem('user', JSON.stringify(response.profile.Obj));

    const { name, googleId, imageUrl } = response.profileObj;

    const doc = {
      _id: googleId,
      _type: 'user',
      userName: name,
      image: imageUrl,
    }

    client.createIfNotExists(doc)
      .then(() => {
        navigate('/', { replace: true })
      })
  }
  return (
    <div className='flex justify-start items-center flex-col h-screen'>
      <div className='relative w-full h-full'>
          <video 
            src={shareVideo}
            type='video/mp4'
            loop
            controls={false}
            muted
            autoPlay
            className='w-full h-full object-cover'
          />
          <div className='absolute flex flex-col justify-center items-center top-0 right-0 left-0 bottom-0 bg-blackOverlay'>
              <div className='p-5'>
                  <img src={logo} width='130px' alt='logo' />
              </div>

              <div className='shadow-2xl'>
                    <GoogleLogin 
                      clientId="380323139927-1809a59ll0fp29rfo40jmubp01c2ife8.apps.googleusercontent.com"
                      render={(renderProps) => (
                        <button
                          type='button'
                          className='bg-mainColor flex justify-center items-center p-3 rounded-lg cursor-pointer outline-none'
                          onClick={renderProps.onClick}
                          disabled={renderProps.disabled}
                          onSuccess={responseGoogle}
                          onFailure={responseGoogle}
                          cookiepolicy='single-host-origin'
                        >
                          <FcGoogle className='mr-4' /> Sign in with Google
                        </button>
                      )}  
                      
                    </GoogleLogin>
              </div>
          </div>
      </div>
    </div>
  )
}

export default Login

index.js 入口路由配置 #

import React, { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter as Router } from 'react-router-dom';

import App from './App';
import './index.css'

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);


root.render(
    <Router>
    <App />
    </Router>, 
    document.getElementById('root')
    );

问题根因 #

代码存在3处直接阻断登录回调执行的错误：

1. 组件属性绑定位置错误
   onSuccess、onFailure、cookie 策略配置是 <GoogleLogin /> 组件的接收参数，原代码将这些属性写在了 render 函数返回的原生 <button> 标签上，Google 授权完成后无法匹配到绑定的成功回调，后续的用户信息存储、数据写入、路由跳转逻辑完全不会触发。
2. 字段拼写错误
   本地存储用户信息时写的字段为 response.profile.Obj，Google 授权返回的用户信息对象正确字段为 profileObj，错误的属性访问会直接抛出 JS 运行时错误，阻断代码执行。
3. 配置项格式错误
   原代码中 cookie 策略的属性名写为 cookiepolicy，正确写法为驼峰格式 cookiePolicy；属性值写为 single-host-origin，正确值为下划线分隔的 single_host_origin，配置不生效会导致跨域场景下授权状态读取失败。

另外原代码未对授权失败场景做分支判断，当出现用户取消授权、clientId 配置不匹配、第三方cookie被拦截等异常时，会直接进入成功回调逻辑，访问不存在的 profileObj 字段触发报错，且无任何错误日志输出，难以定位问题。

修复方案 #

调整属性绑定位置、修正拼写错误、补全异常分支判断，核心修改部分如下：

const Login = () => {
  const navigate = useNavigate();

  const responseGoogle = (response) => {
    // 新增授权失败判断
    if (response.error) {
      console.error('Google 登录失败：', response.error, response.details);
      return;
    }
    // 修正字段拼写错误
    localStorage.setItem('user', JSON.stringify(response.profileObj));
    const { name, googleId, imageUrl } = response.profileObj;
    const doc = {
      _id: googleId,
      _type: 'user',
      userName: name,
      image: imageUrl,
    }
    client.createIfNotExists(doc)
      .then(() => {
        navigate('/', { replace: true })
      })
      // 新增数据写入异常捕获
      .catch(err => console.error('用户信息写入失败：', err))
  }

  return (
    // 其余页面结构保持不变
    <div className='shadow-2xl'>
          <GoogleLogin 
            clientId="380323139927-1809a59ll0fp29rfo40jmubp01c2ife8.apps.googleusercontent.com"
            // 将回调、cookie配置移至GoogleLogin组件属性上，修正配置名和值格式
            onSuccess={responseGoogle}
            onFailure={responseGoogle}
            cookiePolicy='single_host_origin'
            render={(renderProps) => (
              <button
                type='button'
                className='bg-mainColor flex justify-center items-center p-3 rounded-lg cursor-pointer outline-none'
                onClick={renderProps.onClick}
                disabled={renderProps.disabled}
              >
                <FcGoogle className='mr-4' /> Sign in with Google
              </button>
            )}  
          />
    </div>
    // 其余页面结构保持不变
  )
}

补充排查点：

• 确认Google Cloud控制台中配置的授权JavaScript来源、重定向URI，与本地/线上项目的访问域名、端口完全一致，否则会触发授权跨域错误
• 当前使用的react-google-login包已停止官方维护，React 18严格模式下偶发回调不触发的问题，可以替换为官方最新维护的@react-oauth/google包
• 检查浏览器是否开启了第三方cookie拦截，Google登录流程依赖跨域cookie读写，拦截会导致授权状态校验失败

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