如何在Reactjs Redux应用中无刷新显隐reactstrap导航栏？

你的问题核心在于直接读取localStorage不会触发React组件的重新渲染——组件初始化时会检查一次access-token，但之后localStorage变化了，组件并不会自动感知到，所以必须把登录状态纳入React的状态管理体系中，这样状态更新时组件才会重新渲染，实现无刷新的导航栏显隐控制。

下面是具体的改造方案：

1. 将登录状态纳入React状态，并使用Context共享 #

首先修改你的routes/index.js，把登录状态放到组件的useState中，同时通过React Context让其他组件（比如登录、登出组件）能更新这个状态：

import React, { useState, useEffect, createContext } from 'react';
import { BrowserRouter, Route, Switch, useNavigate } from 'react-router-dom';
import { AppHeader } from '../components';
import Users from '../components/Users'; // 确保导入你的Users组件

// 创建AuthContext，用于共享登录状态和更新方法
export const AuthContext = createContext({
  isAuthenticated: false,
  setIsAuthenticated: () => {}
});

export default () => {
  // 初始化状态：从localStorage读取是否存在access-token
  const [isAuthenticated, setIsAuthenticated] = useState(() => {
    return localStorage.getItem('access-token') !== null;
  });

  // 监听跨页面的localStorage变化（比如用户在另一个标签页登录/登出）
  useEffect(() => {
    const handleStorageChange = (e) => {
      if (e.key === 'access-token') {
        setIsAuthenticated(e.newValue !== null);
      }
    };
    window.addEventListener('storage', handleStorageChange);
    return () => window.removeEventListener('storage', handleStorageChange);
  }, []);

  return (
    <AuthContext.Provider value={{ isAuthenticated, setIsAuthenticated }}>
      <BrowserRouter>
        <div>
          {/* 根据React状态控制导航栏显隐 */}
          {isAuthenticated && <AppHeader />}
          <Switch>
            <Route exact path="/users" component={Users} />
            <Route exact path="/users/add" component={Users} />
            <Route exact path="/users/:id" component={Users} />
            {/* 处理登出路由 */}
            <Route exact path="/logout" component={() => {
              const navigate = useNavigate();
              localStorage.removeItem('access-token');
              setIsAuthenticated(false);
              navigate('/');
              return null;
            }} />
          </Switch>
        </div>
      </BrowserRouter>
    </AuthContext.Provider>
  );
};

2. 改造登出逻辑（在AppHeader中使用） #

创建一个独立的Logout组件，通过Context获取状态更新方法，这样点击登出时能直接更新React状态，无需刷新页面：

// components/Logout.js
import React, { useContext } from 'react';
import { useNavigate } from 'react-router-dom';
import { AuthContext } from '../routes';
import { NavItem } from 'reactstrap'; // 假设你用的是reactstrap

export const Logout = () => {
  const { setIsAuthenticated } = useContext(AuthContext);
  const navigate = useNavigate();

  const handleLogout = () => {
    localStorage.removeItem('access-token');
    setIsAuthenticated(false);
    navigate('/');
  };

  return (
    <NavItem>
      <button onClick={handleLogout} className="lnk btn btn-link">Logout</button>
    </NavItem>
  );
};

然后修改你的AppHeader组件，替换原来的Logout链接：

// components/app-header.js
import { Logout } from './Logout';

const AppHeader = () => (
  <Navbar color="light" light expand="md">
    <NavbarBrand href="/">TestBrand</NavbarBrand>
    <Nav navbar>
      <NavItem>
        <Link className="lnk" to='/users'>Users</Link>
      </NavItem>
    </Nav>
    <Nav className="ml-auto" navbar>
      {/* 使用改造后的Logout组件 */}
      <Logout />
    </Nav>
  </Navbar>
);

3. 登录时同步更新React状态 #

在你的登录组件中，登录成功后不仅要把access-token存入localStorage，还要通过Context更新登录状态：

// 示例登录组件
import React, { useContext } from 'react';
import { useNavigate } from 'react-router-dom';
import { AuthContext } from '../routes';

const Login = () => {
  const { setIsAuthenticated } = useContext(AuthContext);
  const navigate = useNavigate();

  const handleLogin = async () => {
    // 假设这里是登录请求逻辑
    const response = await fetch('/api/login', { /* 请求配置 */ });
    const data = await response.json();
    
    if (data.success) {
      localStorage.setItem('access-token', data.token);
      // 更新React状态，触发组件重新渲染
      setIsAuthenticated(true);
      navigate('/users');
    }
  };

  return (
    <button onClick={handleLogin}>登录</button>
  );
};

为什么原来的方式无效？ #

React组件的渲染依赖于状态（state）或属性（props）的变化。你之前直接在Routes中读取localStorage.getItem('access-token')，这个值只会在组件初始化时读取一次，后续localStorage变化时，组件并不会自动重新渲染，所以必须把登录状态放到React的状态中，这样状态更新时，相关组件（包括导航栏的条件渲染部分）才会重新渲染，实现无刷新的显隐控制。

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