HeadlessUI开关带导航栏的选项卡

Question

我有一个选项卡部分(headlesui(，在我的导航栏中，每个选项卡都有链接/按钮。我现在的问题是，我不知道如何使用导航栏中的按钮/链接控制选项卡。是的，选项卡也由Tab.List.控制

页面结构如下：

<app>
<IndexPage(File)>
<LayoutComponent> // in this component is the navbar-component
{content}
<SectionComponent>
<Tabs.Group>
...
</Tabs.Group>
</SectionComponent>
{content}
<LayoutComponent> 
</IndexPage>
</app>

我试着用react state处理TabIndex(像这样(，但我不知道如何通过这么多组件转发状态。我的第二次尝试是使用URL查询，但这有很多错误，而且效果并不好。有办法解决我的问题吗？

ps：我的项目是使用nextjs

Answer 1

我现在正在使用React Context API来构建DataProvider，它非常适合