如何在localStorage不为空时直接渲染Menu组件，无需手动刷新页面？

• localStorage是浏览器原生存储API，它的内容变更无法自动触发React组件的重渲染，你当前的实现中存完登录态后没有同步更新React状态，所以组件不会主动刷新
• 原有useEffect依赖设置为login，但effect内部又调用setLogin，存在死循环风险，且没有监听路由变更事件，路由跳转时不会触发登录态重新校验
• showNav方法每次直接读localStorage判断，没有和React状态绑定，状态变更无法同步到视图

1. 引入useLocation监听路由变化，每次路由跳转自动校验登录态
2. 以React的login状态作为渲染Menu的唯一判断依据，减少重复读localStorage的操作
3. 调整useEffect依赖，避免死循环，初始化和路由变更时都自动同步登录态

import { useState, useEffect } from 'react';
import { BrowserRouter as Router, Switch, Route, useLocation } from 'react-router-dom';
// 导入你的业务组件
import Menu from './Menu';
import MeContacter from './MeContacter';
import Home from './Home';
import Connexion from './Connexion';
import Footer from './Footer';

// 路由内部组件单独封装，保证useLocation可以正常调用
function AppContent() {
  const [login, setLogin] = useState(false);
  const location = useLocation();

  // 路由变化、组件初始化时自动校验登录态
  useEffect(() => {
    const isLogged = localStorage.getItem("connexion") != null;
    setLogin(isLogged);
  }, [location.pathname]);

  const showNav = () => {
    return login ? <Menu /> : <div></div>;
  };

  return (
    <div>
      {showNav()}
      <Switch>
        <Route path="/contact" component={MeContacter} />
        <Route path="/Home" component={Home} />
        <Route path="/" component={Connexion} />
      </Switch>
      <Footer />
    </div>
  );
}

function App() {
  return (
    <Router>
      <AppContent />
    </Router>
  );
}

export default App;

如果不想依赖路由跳转触发更新，你也可以在Connexion登录页面存完localStorage之后，通过状态提升或者全局状态管理的方式直接更新App组件的login状态，不需要等路由跳转就能立刻渲染Menu组件。

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