Using Tabs - Tab with Link from next JS (tab indicator not working)

user_15646454 0
Viewed 208

I'm using Next js with material UI, and I have this so far

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

The active tab indicator is working without the Link component from Nextjs. But as soon as I enclose my tabs with Link component to handle the routing, the tab indicator refuses to work. No errors are thrown either.

material-ui next.js reactjs
1 Answers

You need to pass the props to the child and give a value to 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>
}
user_5378640
Related