时间戳

首页 > 解决方案 > 在 React Next js 应用程序中单击链接时如何传递状态以打开第二个 Material UI 选项卡

reactjs - 在 React Next js 应用程序中单击链接时如何传递状态以打开第二个 Material UI 选项卡

问题描述

我在菜单中有一个链接，如下所示：

 <ListItem button component="a" href="/messages" onClick={(e) => handleClick}> 
  <ListItemText primary="Sent" />
</ListItem>

/messagesroute 有两个使用 Material ui 的选项卡。表 1 显示inbox和表 2 显示sent。

当sentin设置tabState为/messages2

单击列表项时，我希望tabStatein /messages 为 2。现在，它只是在加载时设置为 1。

const [tabState, setTabState] = useState(1);

我可能需要使用 useEffect 将 tabState 设置为存储在 cookie 等存储中的值。我知道我可以使用 cookie 来做到这一点

const [tabState, setTabState] = useState(cookies.messageTabState);

但是我在这里问是否有一种更简单的方法可以在没有 cookie 的情况下执行此操作，例如从列表项（这是侧边栏菜单的菜单项）中传递一些东西。

我的handleClick函数什么都不做，因为我不知道如何让它在它要链接的页面上设置状态。

注意：我不使用 React 路由器，因为 Next js 有一个路由器。

标签： reactjsmaterial-uinext.js

解决方案

你可以使用 props 将数据从一个页面传递到另一个页面或 redux 到维护状态。

推荐阅读