重定向时使用React- Google -登录问题进行Google身份验证

Question

我有一个npm包react-google-login的问题。问题是我有一个redirectUri传递到组件中，但是当我尝试用弹出窗口重定向时，什么也没有发生，但是当我添加uxMode=' redirect‘时，它起作用了，但它给了我一个非常长的url，这是我不喜欢的东西。有没有办法让弹出版本的重定向起作用？

下面是我的代码，clientID被删除了：

import React from 'react';
import GoogleLogin from 'react-google-login';
import ChatRoom from './ChatRoom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faGoogle } from '@fortawesome/free-brands-svg-icons';
import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons';
import {Link} from 'react-router-dom';

const responseGoogle = (res) => {
    console.log('Failed');
}

const successLogin = () => {
    console.log('success');
}

const Authentication = () => {
    return (
            <div className='auth-wrapper'>
                <div className="auth-container">
                    <h1 className="auth-header">Choose Your Sign in Method</h1>
                    <div className="btn-container2">
                        <GoogleLogin 
                            clientId="none"
                            buttonText="Sign in with Google"
                            onSuccess={successLogin}
                            onFailure={responseGoogle}
                            cookiePolicy={'single_host_origin'}
                            uxMode='popup'
                            redirectUri='http://localhost:3000/ChatRoom'
                            render={renderProps => (
                                <button className="btn2 btn-primary2 animate shake" onClick={renderProps.onClick} disabled={renderProps.disabled}><FontAwesomeIcon size='lg' icon={faGoogle} /> Sign in with Google</button>
                            )}
                        />
                        <Link to='/ChatRoom'>
                            <button className="space btn2 btn-primary2 animate shake">
                                <FontAwesomeIcon size='lg' icon={faQuestionCircle} /> Continue as Guest
                            </button>
                        </Link>
                    </div>
                </div>
            </div>
    )
}

export default Authentication

Answer 1

基本上，我所要做的就是在react-router-dom中使用useHistory，并利用history.push('/ page ')；在用户通过身份验证时导航到页面。

let history = useHistory();
// Redirects user after authentication to the ChatRoom
const successLogin = () => {

    history.push('/ChatRoom');

}