React项目路由切换时Navbar不渲染、useEffect未触发问题求助

你遇到的核心问题是：App组件的nb状态只在首次挂载时检查了一次localStorage。用户登录成功后，虽然localStorage里的认证信息已经更新，但App组件没有触发状态更新，nb依然是false，导致Navbar无法显示。只有刷新页面时，App组件重新挂载，useEffect才会再次执行，更新nb状态让Navbar正常显示。

我们需要让App组件在路由切换时自动重新检查认证状态，这样登录后跳转页面就能立即同步Navbar的显示状态。可以通过react-router-dom的useLocation钩子监听路由变化，把location作为useEffect的依赖项，每次路由切换都执行认证检查逻辑。

App.js #

import { React, useEffect, useState } from 'react'
import { Switch, Route, withRouter, useLocation } from 'react-router-dom'
import Login from './components/login/Login'
import Admin from './components/admin/Admin'
import ProtectedRoute from './ProtectedRoute'
import Navbar from './components/Navbar/Navbar'

const App = () => {
  const [nb, setNb] = useState(false)
  const location = useLocation() // 新增：获取当前路由信息

  const checkIsAuth = () => {
    const _isAuth = localStorage.getItem('isAuth');
    const _user = localStorage.getItem('user');
    const _password = localStorage.getItem('password');
    // 注意：localStorage存储的是字符串，需转成布尔值做严谨判断
    const isAuthenticated = _isAuth === 'true' && _user && _password;
    setNb(isAuthenticated)
  }

  useEffect(() => {
    checkIsAuth()
    // 新增：把location加入依赖，路由变化时重新执行认证检查
  }, [location]) 

  return (
    <div style={{ textAlign: "center" }}>
      {nb && <Navbar />}
      <Switch>
        <ProtectedRoute exact path={`/admin`} component={Admin} />
        <Route exact path="/" component={Login} />
      </Switch>
    </div>
  );
}
export default withRouter(App);

额外优化建议 #

1. 修正localStorage值类型问题：你之前存isAuth时用了localStorage.setItem('isAuth', true)，但localStorage会自动把所有值转为字符串，所以取出的_isAuth是字符串"true"而非布尔值true。虽然原判断逻辑能工作，但用_isAuth === 'true'的写法更严谨。
2. 简化状态判断：可以直接在渲染时判断认证状态，不用额外维护nb状态，比如把{nb && <Navbar />}改成{localStorage.getItem('isAuth') === 'true' && localStorage.getItem('user') && localStorage.getItem('password') && <Navbar />}，不过维护状态的方式更利于后续扩展。

当用户登录成功跳转到/admin时，路由发生变化，useLocation返回的location对象会更新，触发useEffect重新执行checkIsAuth。此时能读取到localStorage里最新的认证信息，把nb设为true，Navbar就会立即渲染出来，无需刷新页面。

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