React项目点击Login按钮跳转Google登录页面问题求助

你的代码存在三个核心问题导致跳转失败，以下是针对性修复步骤：

1. 路由配置错误 #

main.jsx 里的路由路径 /loginwithgoogle 错误关联了 Login 组件，而非目标的 Loginwithgoogle 组件，且未导入该组件。同时，Bar、IconsText、Searchbar 等组件放在 Router 外部，导致路由上下文无法覆盖这些组件，Login 里的跳转逻辑无法生效。

修复后的 main.jsx： #

import React from 'react'
import ReactDOM from 'react-dom/client'

import Bar from './components/Bar'
import IconsText from './components/IconsText'
import Searchbar from './components/Searchbar'
import './index.css'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import Login from './components/Login'
// 导入Loginwithgoogle组件
import Loginwithgoogle from './components/Loginwithgoogle'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Router>
      {/* 将所有组件包裹在Router内部，确保路由上下文生效 */}
      <Bar />
      <IconsText />
      <Searchbar />
      <Routes>
        {/* 修正路由关联，指向正确的组件 */}
        <Route path='/loginwithgoogle' element={<Loginwithgoogle />} />
      </Routes>
    </Router>
  </React.StrictMode>
)

2. 使用原生 <a> 标签跳转 #

原生 <a> 标签会触发页面刷新，破坏 React Router 的单页应用路由机制，必须替换为 React Router 提供的 <Link> 组件。

修复后的 Login 组件： #

import React from 'react'
// 导入Link组件
import { Link } from 'react-router-dom'

const Login = () => {
  return (
    <>
      <div className='login-icon hover:text-yellow-800'>
        {/* 用Link替代原生a标签，to属性指定目标路由 */}
        <Link to='/loginwithgoogle'>
          <img src="/src/assets/login.png" alt="login icon" className='mt-2 ml-14 h-8 '/>
          <figcaption className='text-white text-center ml-14 text-[9px] hover:text-yellow-800'>LOGIN</figcaption>
        </Link>
      </div>
    </>
  )
}

export default Login

3. 额外提示：Google 登录脚本引入 #

你的 Loginwithgoogle 组件中使用了 google 对象，但未引入官方脚本，运行时会报错 google is not defined。需要在 public/index.html 的 <head> 或 <body> 末尾添加：

<script src="https://accounts.google.com/gsi/client" async defer></script>

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