title: How do you get Material-UI Tabs to work with react-router?
body: <p>I am trying to get Material-UI tabs to work with routing, and while the routing is working and displaying the selected tab, the smooth animation of navigating between tabs is no longer working. How can I use react router with Material-UI tabs to keep the tab animations working as they should?</p>
  
  <p>As of now, I have the tabs in my HomeHeader.js and I am using this component to pass down the vale as props in order to change the value and thus change the selected tab.</p>
  
  <p>For simplicity, I simplified my code to show the tabs I want to be linked.</p>
  
  <p>Here is my code:</p>
  
  <p>Header.js (Component with Tabs):</p>
  
  <pre><code>import React, { Component } from 'react'
  import PropTypes from 'prop-types'
  import { Link } from 'react-router-dom'
  
  class HomeHeader extends Component {
  
    state = {
      value: false
    };
  
    handleChange = (event, value) =&gt; {
      this.setState({ value })
    };
  
    render() {
      const { classes, value } = this.props
  
      return (
          &lt;AppBar className={classes.appBar} elevation={this.props.elevation}&gt;
            &lt;Hidden smDown&gt;
              &lt;Grid container justify="space-between" alignItems="center"&gt;
                &lt;Tabs value={value} onChange={this.handleChange}&gt;
                  &lt;Tab label="monitor" component={Link} to="/monitor" /&gt;
                  &lt;Tab label="sensor" component={Link} to="/sensor" /&gt;
                &lt;/Tabs&gt;
              &lt;/Grid&gt;
            &lt;/Hidden&gt;
          &lt;/AppBar&gt;
      )
    }
  }
  
  export default withStyles(styles)(HomeHeader)
  </code></pre>
  
  <p>Tab 1 Component (pass value into HomeHeader.js as props):</p>
  
  <pre><code>import React from 'react'
  
  import HomeHeader from '../components/HomeHeader'
  
  class SensorProductPage extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
  
    render() {
      return (
        &lt;div&gt;
          &lt;HomeHeader value={1} /&gt;
          &lt;div&gt; Hello &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default SensorProductPage
  </code></pre>
  
  <p>Tab 2 Component (pass value into HomeHeader.js as props):</p>
  
  <pre><code>import React from 'react'
  
  import HomeHeader from '../components/HomeHeader'
  
  class MonitorProductPage extends React.PureComponent {
  
    render() {
      return (
        &lt;div&gt;
          &lt;HomeHeader value={0} /&gt;
          &lt;div&gt; Hello &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default MonitorProductPage
  </code></pre>