React中设置state后跳转页面，状态重置为初始值的问题求助

问题核心 #

点击Home组件的logo后，isHeaderVisible短暂变为true，但跳转至/tester页面后又重置为false，导致Header无法在Tester页面显示。

根本原因 #

原生<a>标签的href属性会触发浏览器全页面刷新，整个React应用会重新初始化，App组件中管理的isHeaderVisible状态会回到初始值false，和Header组件的渲染逻辑无关。

解决方案 #

方案1：使用React Router实现单页跳转（推荐） #

用React Router的<Link>组件替代原生<a>标签，实现单页内的组件切换，避免页面刷新，状态就能持续保留：

修改Home组件代码：

import React from "react";
import { Link } from "react-router-dom";

interface HomeProps {
  setIsHeaderVisible: React.Dispatch<React.SetStateAction<boolean>>;
}
const Home: React.FC<HomeProps> = ({ setIsHeaderVisible }) => {
  const handleLogoClick = () => {
    setIsHeaderVisible(true);
  };

  return (
    <div>
      <Link to="/tester" onClick={handleLogoClick}>
        <img src="https://picsum.photos/200" alt="Tester Logo" />
      </Link>
    </div>
  );
};

export default Home;

方案2：持久化状态（应对页面刷新场景） #

如果需要在页面刷新后也保留状态，可以用localStorage同步状态：

修改App组件代码：

import React, { useState, useEffect } from "react";
import Header from "./Header";

const App = () => {
  const [isHeaderVisible, setIsHeaderVisible] = useState<boolean>(() => {
    // 从localStorage读取初始状态
    const savedState = localStorage.getItem("isHeaderVisible");
    return savedState ? JSON.parse(savedState) : false;
  });

  // 状态变化时同步到localStorage
  useEffect(() => {
    localStorage.setItem("isHeaderVisible", JSON.stringify(isHeaderVisible));
  }, [isHeaderVisible]);

  return (
    <div>
      <Header isHeaderVisible={isHeaderVisible} />
      {/* 路由配置代码 */}
    </div>
  );
};

export default App;

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