Material-ui adding Link component from react-router
here's how you can do it now:
<Tabs onChange={this.changeTab} value={value}>
<Tab value={0} label="first" containerElement={<Link to="/first"/>} />
<Tab value={1} label="second" containerElement={<Link to="/second"/>}/>
<Tab value={2} label="third" containerElement={<Link to="/third"/>} />
</Tabs>
For Material UI 1.0 with Typescript: see this post by @ogglas below.
For Material-UI 1.0 with plain JS:
<Tabs value={value} onChange={this.handleChange}>
{
this.props.tabs.map(
({label, path})=><Tab key={label}
label={label}
className={classes.tabLink}
component={Link}
to={path} />
)
}
</Tabs>
And classes.tabLink
is defined as:
tabLink : {
display:"flex",
alignItems:"center",
justifyContent:"center"
}
How this works?
All the mui 1.0 components inheriting from ButtonBase
, support a component
prop, see ButtonBase. The idea is to allow you to control what the component renders as its wrapper/root element. Tab
also has this feature although at the time of writing this answer this prop is not documented explicitly, but as Tab
inherits from ButtonBase
, all its props carry over (and the documentation does cover this).
Another feature of ButtonBase
is that all the extra props, not in use by ButtonBase
or inherited component, are spread over the specified component
. We have used this behavior to send the to
prop used by Link
by giving it to Tab
control. You can send any additional props in the same way. Note that this is documented explicitly for both ButtonBase
and Tab
.
Thanks @josh-l for asking this to be added.