React HashRouter状态管理：页面刷新后如何保留选中团队数据（隐藏ID）

问题根源 #

路由通过<Link>传递的state是浏览器内存中的临时会话状态，页面刷新时，React应用会重新加载，这份临时状态会被彻底清空。你当前用useLocation().state初始化组件状态，刷新后location.state不存在，组件就会回退到预设的默认值（team05）——并不是setSTater没生效，而是刷新前的状态没有被持久化保存。

解决方案（无需路径参数） #

要在刷新后保留选中状态，需将数据持久化到本地存储（localStorage或sessionStorage），具体实现如下：

步骤1：初始化状态时优先读取持久化数据 #

组件初始化时，先判断是否通过<Link>跳转（存在location.state），优先使用路由传参；否则读取本地存储的数据，最后 fallback 到默认值：

import { useLocation, useEffect, useState } from 'react';
import axios from 'axios';

const Team = () => {
  const location = useLocation();
  const [teamList, setTeamList] = useState([]);
  // 初始化选中团队状态
  const [selectedTeam, setSelectedTeam] = useState(() => {
    // 首次通过Link跳转时，用路由传递的state
    if (location.state) {
      return location.state;
    }
    // 刷新或直接访问时，读取本地存储的数据
    const savedTeam = localStorage.getItem('selectedTeam');
    return savedTeam ? JSON.parse(savedTeam) : { teamId: 'team05', teamName: 'team05' };
  });

  // 加载团队列表
  useEffect(() => {
    axios.get('/api/teams').then(res => {
      setTeamList(res.data);
    });
  }, []);

  // 菜单点击事件：更新状态并同步到本地存储
  const handleTeamSelect = (team) => {
    const newTeam = { teamId: team.id, teamName: team.name };
    setSelectedTeam(newTeam);
    localStorage.setItem('selectedTeam', JSON.stringify(newTeam));
  };

  return (
    <div>
      <h1>当前团队：{selectedTeam.teamName}</h1>
      <ul>
        {teamList.map(team => (
          <li 
            key={team.id} 
            onClick={() => handleTeamSelect(team)}
            style={{ color: selectedTeam.teamId === team.id ? 'blue' : 'black' }}
          >
            {team.name}
          </li>
        ))}
      </ul>
      {/* 其他页面内容 */}
    </div>
  );
};

export default Team;

步骤2：根据需求选择存储方式 #

• 若希望关闭浏览器后仍保留选中状态：使用localStorage
• 若希望仅在当前标签页会话中保留：替换代码中所有localStorage为sessionStorage即可

额外说明 #

当用户从App页面再次通过<Link>跳转至Team页面时，路由的state会自动覆盖本地存储的旧数据，确保跳转后的状态为最新选择。

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