React前端导航栏显示异常问题排查及解决方案求助

嘿，我仔细看了你的代码，发现两个关键问题导致导航栏显示不符合预期：

1. 令牌存储与删除的Key不匹配 #

在Navbar.js的logOut方法里，你删除的是undertoken：

localStorage.removeItem('undertoken')

但在UserFunctions.js的登录逻辑中，你存到localStorage的令牌Key是usertoken：

localStorage.setItem('usertoken', res.data)

这就导致登出操作根本没删掉登录时存的令牌，所以页面一直认为用户是登录状态，导航栏自然不会切换回去。

2. 登录状态判断的写法不严谨 #

你直接用localStorage.usertoken来判断是否登录，虽然部分浏览器支持这种写法，但标准且更可靠的方式是用localStorage.getItem('usertoken')，同时还要确保令牌不是空值。

完整修复步骤 #

第一步：修正Navbar的登出方法和状态判断 #

更新Navbar.js的代码，把Key统一成usertoken，并改用标准的判断方式：

import {Link, withRouter} from 'react-router-dom'
class Navbar extends Component {
  logOut(e){
    e.preventDefault()
    // 修正：删除正确的令牌Key
    localStorage.removeItem('usertoken')
    this.props.history.push('/')
    // 强制组件重新渲染，更新导航栏状态
    this.forceUpdate()
  }

  render(){
    const loginRegLink = (
      <ul className="navbar-nav">
        <li className="nav-item">
          <Link to="/login" className="nav-link"> Login </Link>
        </li>
        <li className="nav-item">
          <Link to="/register" className="nav-link"> Register </Link>
        </li>
      </ul>
    )
    const userLink = (
      <ul className="navbar-nav">
        <li className="nav-item">
          <Link to="/profile" className="nav-link"> User </Link>
        </li>
        <li className="nav-item">
          <a href="" onClick={this.logOut.bind(this)} className="nav-link"> Logout </a>
        </li>
      </ul>
    )
    // 标准方式检查令牌是否存在
    const isLoggedIn = !!localStorage.getItem('usertoken')

    return (
      <nav className="navbar navbar-expand-lg navbar-dark bg-dark rounded">
        <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar1" aria-controls="navbar1" aria-expanded="false" aria-label="Toggle navigation">
          <span className="navbar-toggle-icon"></span>
        </button>
        <div className="collapse navbar-collapse justify-content-md-center" id="navbar1">
          <ul className="navbar-nav">
            <li className="nav-item">
              <Link to="/" className="nav-link"> Home </Link>
            </li>
          </ul>
          {isLoggedIn ? userLink : loginRegLink}
        </div>
      </nav>
    )
  }
}
export default withRouter(Navbar)

第二步：优化登录后的状态同步（可选但推荐） #

为了让登录成功后导航栏自动切换状态，你可以在登录成功后刷新页面，或者引入React状态管理（比如Context API）。如果暂时不想搞复杂的状态管理，简单的方式是在登录成功后跳转时刷新页面：

修改UserFunctions.js的login函数：

export const login = user => {
  return axios
    .post('/users/login', {
      email: user.email,
      password: user.password
    })
    .then(res=>{
      localStorage.setItem('usertoken', res.data)
      // 登录成功后刷新页面，确保Navbar重新渲染
      window.location.href = '/'
      return res.data
    })
    .catch(err => {
      console.log(err)
    })
}

额外优化建议 #

• 长远来看，建议用React Context或者Redux来维护全局登录状态，这样组件能自动响应状态变化，不用手动调用forceUpdate或者刷新页面。
• 可以在App组件中监听storage事件，当其他标签页修改了localStorage时，当前页面的导航栏也能同步更新：

// 在App.js中添加（如果用函数组件的话）
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const handleStorageChange = () => {
      // 简单方式：刷新页面同步状态
      window.location.reload();
      // 或者用Context更新状态，这里就不展开了
    };
    window.addEventListener('storage', handleStorageChange);
    return () => window.removeEventListener('storage', handleStorageChange);
  }, []);

  // 原有的App渲染逻辑...
}

这样修改后，未登录用户访问首页时会正确显示Home、Login和Register，登录后切换为Home、User和Logout，登出后也会立刻恢复正确的导航选项啦！

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