Evaldas Buinauskas Evaldas Buinauskas - 2 months ago 23
React JSX Question

Material-ui adding Link component from react-router

I'm having struggle 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:
Navbar

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.

Answer

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>
Comments