Блог

Я использую Next js с интерфейсом material, и до сих пор у меня есть это

 <Tabs value={value} onChange={handleChange}>
<Link href="/" passHref>
<Tab label="Home"/>
</Link>
...
</Tabs>
 

Индикатор активной вкладки работает без компонента Ссылки из Nextjs. Но как только я включаю свои вкладки с компонентом Link для обработки маршрутизации, индикатор вкладки отказывается работать. Ошибок также не возникает.

Вам нужно передать реквизит ребенку и указать значение для ссылки.

 function LinkTab(props) {
  return <Link {...props}>
    {React.cloneElement(props.children, {...props})}
  </Link>
}

function MyComponent(props) {
  let tab = "tab1";
  return <Tabs value={tab}>
    <LinkTab value="tab1" href="/tab1"><Tab component="a" label="A Tab"/></LinkTab>
  </Tabs>
}