不使用Redux实现动态DrawerNavigator：登录后加载抽屉导航

嘿，这个需求其实很好实现！不用Redux的话，咱们完全可以依靠React的内置状态管理（useState + useEffect）配合本地存储（localStorage）来搞定，下面给你一步步拆解：

核心思路 #

我们需要追踪用户的登录状态，并且让这个状态在页面刷新后也能保留。然后根据当前的登录状态，条件渲染不同的导航菜单——未登录时显示注册、登录、信息页；登录后显示个人中心、功能页和登出选项。

具体实现步骤 #

1. 初始化登录状态 #

在你的根组件或者导航组件里，用useState来维护登录状态，同时从localStorage读取初始值（这样刷新页面后状态不会丢失）：

import { useState, useEffect } from 'react';

function App() {
  // 从localStorage获取初始登录状态，默认未登录
  const [isLoggedIn, setIsLoggedIn] = useState(() => {
    return localStorage.getItem('isLoggedIn') === 'true';
  });

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

  // 登录函数：登录成功后更新状态
  const handleLogin = () => {
    // 这里可以替换成你的实际登录逻辑（比如请求后端接口验证）
    setIsLoggedIn(true);
  };

  // 登出函数：清除登录状态
  const handleLogout = () => {
    setIsLoggedIn(false);
    // 如果有用户信息存在localStorage，这里也可以一起清除
    localStorage.removeItem('userInfo');
  };

  // ...后续渲染逻辑
}

2. 条件渲染导航菜单 #

根据isLoggedIn的值，渲染对应的导航选项：

// 在App组件的return里
return (
  <div className="App">
    {/* 抽屉导航容器 */}
    <div className="drawer-nav">
      {!isLoggedIn ? (
        // 未登录时的菜单
        <ul>
          <li># Register</li>
          <li># Login</li>
          <li># Info</li>
        </ul>
      ) : (
        // 登录后的菜单
        <ul>
          <li># My Account</li>
          <li># Other Function</li>
          <li># Other Function</li>
          <li onClick={handleLogout}># Logout</li>
        </ul>
      )}
    </div>

    {/* 其他页面内容，比如登录表单 */}
    {!isLoggedIn && (
      <div className="login-form">
        {/* 你的登录表单，提交时调用handleLogin */}
        <button onClick={handleLogin}>登录</button>
      </div>
    )}
  </div>
);

3. 扩展：用Context共享登录状态（如果跨组件需要） #

如果你的导航组件和登录组件不在同一个层级，不想层层传递状态的话，可以用React Context来封装登录状态和操作函数，这样任何组件都能直接获取和修改登录状态：

// 创建AuthContext.js
import { createContext, useContext, useState, useEffect } from 'react';

const AuthContext = createContext();

export function AuthProvider({ children }) {
  const [isLoggedIn, setIsLoggedIn] = useState(() => {
    return localStorage.getItem('isLoggedIn') === 'true';
  });

  useEffect(() => {
    localStorage.setItem('isLoggedIn', isLoggedIn.toString());
  }, [isLoggedIn]);

  const login = () => setIsLoggedIn(true);
  const logout = () => setIsLoggedIn(false);

  return (
    <AuthContext.Provider value={{ isLoggedIn, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

export function useAuth() {
  return useContext(AuthContext);
}

然后在根组件里包裹：

import { AuthProvider } from './AuthContext';

function Root() {
  return (
    <AuthProvider>
      <App />
    </AuthProvider>
  );
}

之后在导航组件或者登录组件里直接使用：

import { useAuth } from './AuthContext';

function DrawerNav() {
  const { isLoggedIn, logout } = useAuth();

  return (
    <div className="drawer-nav">
      {!isLoggedIn ? (
        <ul>
          <li># Register</li>
          <li># Login</li>
          <li># Info</li>
        </ul>
      ) : (
        <ul>
          <li># My Account</li>
          <li># Other Function</li>
          <li># Other Function</li>
          <li onClick={logout}># Logout</li>
        </ul>
      )}
    </div>
  );
}

这样就完美实现了你的需求，全程没用到Redux，用React自带的API就搞定了～

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