如何在 React 中使用 hashrouter 管理状态答案

【问题标题】：How to manage the state with hashrouter in react如何在 React 中使用 hashrouter 管理状态
【发布时间】：2023-01-17 04:42:51
【问题描述】：

如何在刷新页面时留在新数据中

在 App.js 中

<Link to={"/Team"} state={{ teamId: team.id,teamName:team.name }}>{team.name}</Link>

在团队路由器页面

const [sTater,setSTater] = useLocation().state;



<Menu className={`menu2`} onClick={onClickMenu2}>
{teamList.map((n, idx) => { return <Menu.Item key={n.id}>{n.name}</Menu.Item> })}
</Menu>


const onClickMenu2 = ({ key }) => {
        let curname = teamList.filter(n=>n.id===key)[0];

        setSTater({'teamId':key,'teamName':curname.name});
}

我使用 sTater 在页面中显示 id 和名称。例如 team05。代码中的 teamList 来自 axios 请求。

当我改变一个团队时，它运作良好。例如 team14 数据。但是现在我刷新页面。转回旧数据team05。似乎 setSTater 不起作用。为什么？刷新页面时如何保留 team14 数据。附言我不知道在地址中使用 /Team:id。我只想隐藏id

【问题讨论】：

标签： react-router-dom page-refresh

【解决方案1】：

const [sTater, setSTater] = useLocation().state; 似乎不正确。传递的路由 state 是一个对象，而不是带有“state”和“setState”的数组。

假设在您的代码中您正确访问了路由状态并将其保存到本地状态，您还需要将组件状态保存到 localStorage 之类的东西，以便它在页面重新加载时保持不变。请记住，页面和 React 应用仅存在于内存中。重新加载页面时，现有页面将被丢弃，React 应用程序将以初始状态新安装。

流程可能如下所示：

const { state } = useLocation();

const [sTater, setSTater] = useState(() => {
  // if passed route state, initialize from route state
  if (state?.teamId && state?.teamName) {
    return state;
  }

  // else initialize from any persisted data or default fallback
  return JSON.parse(localStorage.getItem("sTater")) || { teamId: "", teamName: "" };
});

// Persist sTater state to localStorage
useEffect(() => {
  localStorage.setItem("sTater", JSON.stringify(sTater));
}, [sTater]);

【讨论】：