React+MongoDB电商网站：已登录用户Account按钮跳转优化

步骤1：创建全局登录状态上下文（Index.js） #

先通过React Context实现登录状态的全局管理，避免页面刷新后状态丢失：

// Index.js
import React, { createContext, useState, useEffect } from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';

// 创建Auth上下文
export const AuthContext = createContext();

const Root = () => {
  // 从localStorage读取初始登录状态
  const [isLoggedIn, setIsLoggedIn] = useState(() => {
    return localStorage.getItem('isLoggedIn') === 'true';
  });

  // 登录状态变化时同步到localStorage
  useEffect(() => {
    localStorage.setItem('isLoggedIn', isLoggedIn.toString());
  }, [isLoggedIn]);

  return (
    <AuthContext.Provider value={{ isLoggedIn, setIsLoggedIn }}>
      <App />
    </AuthContext.Provider>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Root />);

步骤2：修改Navbar.jsx的跳转逻辑 #

在导航栏中通过Context获取登录状态，动态设置Account按钮的跳转路径：

// Navbar.jsx
import React, { useContext } from 'react';
import { Link } from 'react-router-dom';
import { AuthContext } from './Index';

const Navbar = () => {
  const { isLoggedIn } = useContext(AuthContext);

  return (
    <nav className="navbar">
      {/* 其他导航项 */}
      <Link to={isLoggedIn ? '/home2' : '/login'} className="account-btn">
        Account
      </Link>
    </nav>
  );
};

export default Navbar;

步骤3：更新Login页的登录状态逻辑 #

用户登录成功后，更新全局登录状态并跳转至Home2页：

// Login.jsx
import React, { useState, useContext } from 'react';
import { useNavigate } from 'react-router-dom';
import { AuthContext } from './Index';

const Login = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const { setIsLoggedIn } = useContext(AuthContext);
  const navigate = useNavigate();

  const handleLogin = async (e) => {
    e.preventDefault();
    // 调用MongoDB后端接口验证用户
    try {
      const res = await fetch('/api/auth/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, password })
      });
      const data = await res.json();
      if (data.success) {
        setIsLoggedIn(true);
        navigate('/home2');
      } else {
        alert('登录失败：' + data.message);
      }
    } catch (err) {
      console.error('登录请求出错:', err);
      alert('网络错误，请稍后重试');
    }
  };

  return (
    <div className="login-container">
      <form onSubmit={handleLogin}>
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder="邮箱"
          required
        />
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          placeholder="密码"
          required
        />
        <button type="submit">登录</button>
      </form>
    </div>
  );
};

export default Login;

步骤4：Home2页添加登出功能（可选） #

在用户信息页添加登出按钮，重置登录状态：

// Home2.jsx
import React, { useContext } from 'react';
import { useNavigate } from 'react-router-dom';
import { AuthContext } from './Index';

const Home2 = () => {
  const { setIsLoggedIn } = useContext(AuthContext);
  const navigate = useNavigate();

  const handleLogout = () => {
    setIsLoggedIn(false);
    navigate('/login');
  };

  return (
    <div className="user-info-container">
      <h2>用户中心</h2>
      {/* 展示用户信息 */}
      <button onClick={handleLogout}>登出</button>
    </div>
  );
};

export default Home2;

核心逻辑说明 #

• 用localStorage持久化登录状态，解决页面刷新后状态丢失问题
• 通过React Context实现全局状态共享，让Navbar能实时获取登录状态
• 跳转逻辑通过isLoggedIn条件判断，动态切换Link组件的to属性

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