I'm struggling to add <Link/>
component to my material-ui AppBar
This is my navigation class:
class Navigation extends Component { constructor(props) { super(props) } render() { var styles = { appBar: { flexWrap: 'wrap' }, tabs: { width: '100%' } } return ( <AppBar showMenuIconButton={false} style={styles.appBar}> <Tabs style={styles.tabs}> <Tab label='Most popular ideas'/> <Tab label='Latest ideas' /> <Tab label='My ideas' /> </Tabs> </AppBar> ) } }
Which looks okay:
Tabs are clickable, have fluid animations, that's cool. But how do I wire them up together with react-router
and its' <Link/>
component?
I've tried adding onChange
listener like that:
<Tab label='My ideas' onChange={<Link to='/myPath'></Link>} />
However I'm getting following error:
Uncaught Invariant Violation: Expected onChange listener to be a function, instead got type object
If I try to wrap <Tab/>
component into <Link/>
component, I'm getting error that <Tabs/>
component accepts only <Tab/>
component.
This doesn't work either (no error is being produced, but clicking on Tab does not bring me to the path):
<Tab label='Most popular ideas'> <Link to='/popular'/> </Tab>
How do I make <Link/>
component work together with <Tabs>
and <AppBar>
? If that's not possible, I can use any other component from material-ui
library to form a proper menu.
You can use the component prop of Material-UI's Link to integrate with Link in react-router-dom . You can do the same thing with Material-UI's Button .
To add the link in the menu, use the <NavLink /> component by react-router-dom . The NavLink component provides a declarative way to navigate around the application. It is similar to the Link component, except it can apply an active style to the link if it is active.
First, you need to create your hyperlink with the <Link/> tag. Second, you need to create a <Switch/> section in your component tree where the content you're linking to will go. Third — both the <Link/> and <Switch/> tags need to be inside a <Router/> tag.
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" }
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.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With