Evaldas Buinauskas Evaldas Buinauskas - 1 year ago 274
React JSX Question

Material-ui adding Link component from react-router

I'm having struggle to add

component to my material-ui AppBar

This is my navigation class:

class Navigation extends Component {
constructor(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' />

Which looks okay:

Tabs are clickable, have fluid animations, that's cool. But how do I wire them up together with
and its'

I've tried adding
listener like that:

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
component into
component, I'm getting error that
component accepts only

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'/>

How do I make
component work together with
? If that's not possible, I can use any other component from
library to form a proper menu.

Answer Source

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"/>} />
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download