在React Next js应用程序中单击链接时，如何传递状态以打开“第二个材料UI”选项卡

Question

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

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

/messages路线使用Material ui有两个标签。标签1显示inbox，标签2显示sent。

在sent中的tabState设置为/messages时显示2标签

单击列表项后，我希望/ messages中的tabState为2。现在，它在加载时才设置为1。

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

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

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

但是我在这里问是否有一种更简单的方法来执行此操作而无需使用cookie，例如从列表项（侧边栏菜单的菜单项）中传递一些东西。

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

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

Answer 1

您可以使用道具将数据从一页传递到另一页，或将数据传递到维护状态。