title: Material-ui adding Link component from react-router
body: <p>I'm struggling to add <code>&lt;Link/&gt;</code> component to my material-ui AppBar</p>
  
  <p>This is my navigation class:</p>
  
  <pre><code>class Navigation extends Component {
    constructor(props) {
      super(props)
    }
  
    render() {
      var styles = {
        appBar: {
          flexWrap: 'wrap'
        },
        tabs: {
          width: '100%'
        }
      }
  
      return (
        &lt;AppBar showMenuIconButton={false} style={styles.appBar}&gt;
          &lt;Tabs style={styles.tabs}&gt;
            &lt;Tab label='Most popular ideas'/&gt;
            &lt;Tab label='Latest ideas' /&gt;
            &lt;Tab label='My ideas' /&gt;
          &lt;/Tabs&gt;
        &lt;/AppBar&gt;
      )
    }
  }
  </code></pre>
  
  <p>Which looks okay:
  <a href="https://i.stack.imgur.com/POPVy.png" rel="noreferrer"><img src="https://i.stack.imgur.com/POPVy.png" alt="Navbar"></a></p>
  
  <p>Tabs are clickable, have fluid animations, that's cool. But how do I wire them up together with <code>react-router</code> and its' <code>&lt;Link/&gt;</code> component?</p>
  
  <p>I've tried adding <code>onChange</code> listener like that:</p>
  
  <pre><code>&lt;Tab
    label='My ideas'
    onChange={&lt;Link to='/myPath'&gt;&lt;/Link&gt;}
  /&gt;
  </code></pre>
  
  <p>However I'm getting following error:</p>
  
  <pre><code>Uncaught Invariant Violation: Expected onChange listener to be a function, instead got type object
  </code></pre>
  
  <p>If I try to wrap <code>&lt;Tab/&gt;</code> component into <code>&lt;Link/&gt;</code> component, I'm getting error that <code>&lt;Tabs/&gt;</code> component accepts only <code>&lt;Tab/&gt;</code> component.</p>
  
  <p>This doesn't work either (no error is being produced, but clicking on Tab does not bring me to the path):</p>
  
  <pre><code>&lt;Tab label='Most popular ideas'&gt;
    &lt;Link to='/popular'/&gt;
  &lt;/Tab&gt;
  </code></pre>
  
  <p>How do I make <code>&lt;Link/&gt;</code> component work together with <code>&lt;Tabs&gt;</code> and <code>&lt;AppBar&gt;</code>? If that's not possible, I can use any other component from <code>material-ui</code> library to form a proper menu.</p>