React.js中基于登录状态的Nav组件条件渲染不生效如何解决？

核心问题及修复方案 #

1. localStorage存储值类型匹配错误

localStorage仅支持存储字符串类型，你存入的布尔值true/false会被自动转为字符串"true"/"false"。你直接使用loginStatus==false做判断时，非空字符串转布尔值默认是true，字符串"false"和布尔值false的相等判断也不成立，导致判断条件永远走同一个分支。
修复方案：读取localStorage时主动转为布尔值：

const [loginStatus,setLoginStatus] = useState(localStorage.getItem('user') === 'true')

2. localStorage更新后未同步触发组件重渲染

useState的初始值仅在组件首次挂载时读取一次，你后续登录、登出操作仅修改了localStorage的值，没有调用setLoginStatus更新状态，组件不会触发重渲染，条件渲染自然不会生效。
修复方案：登录、登出逻辑中修改localStorage后，同步更新state：

• 登录逻辑中新增：

setLoginStatus(true)

• 登出逻辑中新增：

setLoginStatus(false)

3. 可选代码优化

你当前的三元渲染逻辑两个分支重复度极高，仅未登录状态多了注册入口，可以大幅精简代码，避免冗余：

<div className="nav">
  <h2>TITLE</h2>
  <div className="buttons">
    <div>About</div>
    <div>How to use</div>
    <button onClick={logoutHandler}>Logout</button>
    <StyledLink to="/login"><FontAwesomeIcon icon={faSignInAlt}/></StyledLink>
    {/* 仅未登录状态展示注册入口 */}
    {!loginStatus && <StyledLink to="/register"><FontAwesomeIcon icon={faUserPlus}/></StyledLink>}
    <button onClick={()=>setIndexStatus(!indexStatus)} >Index</button>
  </div>
</div>

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