title: Material UI AppBar with React Router 4 Implementation not working
body: <p>I am building a react project with material ui and react router 4 but I can't get a basic example working and I am unsure why!?I don't have any errors and I have everything the basic example on react routers documentation has. I can't seem to find very much help through a standard google search since most people have not moved over to react router 4 yet it seems like. Everything shows up on the page fine but when I click on the tab the route does not actually change.</p>
  
  <pre><code>import React, { Component } from 'react';
  import AppBar from 'material-ui/AppBar';
  import IconButton from 'material-ui/IconButton';
  import IconMenu from 'material-ui/IconMenu';
  import MenuItem from 'material-ui/MenuItem';
  import Tabs from 'material-ui/Tabs/Tabs';
  import Tab from 'material-ui/Tabs/Tab';
  import Menu from 'material-ui/svg-icons/navigation/menu';
  import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
  import styles from './Navigation.css';
  
  const About = () =&gt; (
    &lt;div&gt;
      &lt;h2&gt;About&lt;/h2&gt;
    &lt;/div&gt;
  );
  
  const App = () =&gt; (
    &lt;div&gt;
      &lt;h2&gt;About&lt;/h2&gt;
    &lt;/div&gt;
  );
  
  class AppBarComponent extends Component {
    state = {
      logged: true,
    };
  
    handleChange = (event, logged) =&gt; {
      this.setState({ logged });
    };
  
    render() {
      return (
        &lt;Router&gt;
          &lt;div&gt;
            &lt;AppBar
              title="Title"
              iconElementLeft={
                &lt;IconMenu
                  iconButtonElement={&lt;IconButton className={styles.mobileNav}&gt;&lt;Menu /&gt;&lt;/IconButton&gt;}
                  iconStyle={{ color: '#fff' }}
                &gt;
                  &lt;MenuItem primaryText="Menu Item 1" /&gt;
                  &lt;MenuItem primaryText="Menu Item 2" /&gt;
                  &lt;MenuItem primaryText={this.state.logged ? 'Welcome user' : 'Login'} /&gt;
                &lt;/IconMenu&gt;
            }
            &gt;
              &lt;Tabs className={styles.desktopNav}&gt;
                &lt;Tab label="Menu Item 1" component={Link} to="/" /&gt;
                &lt;Tab label="Menu Item 2" component={Link} to="/about" /&gt;
                &lt;Tab label={this.state.logged ? 'Welcome user' : 'Login'} /&gt;
              &lt;/Tabs&gt;
            &lt;/AppBar&gt;
            &lt;Route exact path="/" component={App} /&gt;
            &lt;Route path="/about" component={About} /&gt;
          &lt;/div&gt;
        &lt;/Router&gt;
      );
    }
  }
  
  export default AppBarComponent;
  </code></pre>
  
  <p>This is my index.js file, its pretty basic nothing special. </p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
  import AppBarComponent from './Navigation/Navigation';
  import registerServiceWorker from './registerServiceWorker';
  
  ReactDOM.render(
    &lt;MuiThemeProvider&gt;
      &lt;AppBarComponent /&gt;
    &lt;/MuiThemeProvider&gt;,
    document.getElementById('root'),
  );
  registerServiceWorker();
  </code></pre>