React中如何将Google登录组件的用户数据传递至Dashboard组件？

你当前的需求是将Login组件中通过Google登录获取的用户数据，传递到Dashboard组件以动态展示用户名，以下是几种可行的实现方案：

方案一：React Context全局状态管理（推荐） #

这种方式适合后续功能扩展（比如全局登出、多组件共享用户数据），能统一管理用户状态。

1. 创建UserContext.js #

在项目根目录新建UserContext.js文件：

import { createContext, useContext, useState } from 'react';

const UserContext = createContext();

export function UserProvider({ children }) {
  const [user, setUser] = useState({});

  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
}

export function useUser() {
  return useContext(UserContext);
}

2. 修改App.js，用Provider包裹路由 #

将路由嵌套在UserProvider中，让所有子组件都能访问全局用户状态：

import './App.css';
import Login from './atoms/Login';
import { BrowserRouter , Routes, Route } from 'react-router-dom';
import Dashboard from './pages/Dashboard';
import { UserProvider } from './UserContext';

function App() {
  return (
    <UserProvider>
      <BrowserRouter>
        <Routes>
          <Route path="/dashboard" element={<Dashboard/>} />
          <Route exact path="/" element={<Login/>} />    
        </Routes>
      </BrowserRouter>
    </UserProvider>
  );
}

export default App;

3. 修改Login组件，使用全局Context状态 #

移除组件内的useState，改用全局Context管理用户数据：

import React, { useEffect } from 'react'
import { useNavigate } from 'react-router-dom';
import jwt_decode from 'jwt-decode';
import { useUser } from '../UserContext';

const Login = () => {
  const navigate = useNavigate()
  const { user, setUser } = useUser();

  function handleCallbackResponse(response){
    var userData = jwt_decode(response.credential);
    setUser(userData);
    document.getElementById('signInDiv').hidden = true;
    navigate('/dashboard');
  }

  function handleSignOut(event) {
    setUser({})
    document.getElementById('signInDiv').hidden = false;
  }

  useEffect(()=>{
    /*global google*/
    google.accounts.id.initialize({
      client_id:"186813496344-0j9cjp3klq5igcsk8a2vcdm5gcosner8.apps.googleusercontent.com",
      callback: handleCallbackResponse
    })

    google.accounts.id.prompt();

    google.accounts.id.renderButton(
      document.getElementById('signInDiv'),
      {theme: 'outline', size: 'medium'}
    )

  }, []);

  return (
    <div>
      <div id="signInDiv"></div>
      {
        Object.keys(user).length !== 0 &&
        <button onClick={(e)=>handleSignOut(e)}>Sign Out</button>
      }
      {Object.keys(user).length !== 0 && 
        <div>
          <img src={user.picture} alt="" />
          <h3>{user.name}</h3>
        </div>
      }
    </div>
  )
}

export default Login

4. 修改Dashboard组件，读取全局用户数据 #

替换硬编码的用户名，动态展示用户信息：

import React from 'react'
import Navbar from '../organisms/Navbar'
import './Dashboard.css'
import { useUser } from '../UserContext';

const Dashboard = () => {
  const { user } = useUser();

  return (
    <div className='dashboard'>
        <h2>{user.name || 'Guest'}</h2>
        <Navbar/>
        <div className='content'>
            <h1>Welcome to my Dashboard</h1>
        </div>
    </div>
  )
}

export default Dashboard

方案二：通过路由状态传递（简单临时场景） #

这种方式适合仅需单次传递数据的场景，刷新页面后数据会丢失，无需全局状态管理。

1. 修改Login组件的跳转逻辑 #

跳转到Dashboard时携带用户数据：

// 在Login的handleCallbackResponse函数中修改navigate
navigate('/dashboard', { state: { user: userData } });

2. 修改Dashboard组件，获取路由状态 #

使用useLocation读取传递过来的用户数据：

import React from 'react'
import Navbar from '../organisms/Navbar'
import './Dashboard.css'
import { useLocation } from 'react-router-dom';

const Dashboard = () => {
  const location = useLocation();
  const user = location.state?.user || {};

  return (
    <div className='dashboard'>
        <h2>{user.name || 'Guest'}</h2>
        <Navbar/>
        <div className='content'>
            <h1>Welcome to my Dashboard</h1>
        </div>
    </div>
  )
}

export default Dashboard

方案三：使用localStorage持久化数据 #

这种方式可以让用户刷新页面后仍保持登录状态，适合需要记住登录信息的场景。

1. 修改Login组件，存储/清除用户数据 #

// 在handleCallbackResponse中添加本地存储
setUser(userData);
localStorage.setItem('user', JSON.stringify(userData));

// 在handleSignOut中清除本地存储
setUser({});
localStorage.removeItem('user');

// 组件挂载时自动读取本地存储（实现自动登录）
useEffect(()=>{
  const savedUser = localStorage.getItem('user');
  if(savedUser){
    setUser(JSON.parse(savedUser));
    document.getElementById('signInDiv').hidden = true;
  }
  // 保留原有的google初始化代码
}, []);

2. 修改Dashboard组件，读取本地存储数据 #

import React, { useState, useEffect } from 'react'
import Navbar from '../organisms/Navbar'
import './Dashboard.css'

const Dashboard = () => {
  const [user, setUser] = useState({});

  useEffect(()=>{
    const savedUser = localStorage.getItem('user');
    if(savedUser){
      setUser(JSON.parse(savedUser));
    }
  }, []);

  return (
    <div className='dashboard'>
        <h2>{user.name || 'Guest'}</h2>
        <Navbar/>
        <div className='content'>
            <h1>Welcome to my Dashboard</h1>
        </div>
    </div>
  )
}

export default Dashboard

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