title: Using @Material-UI Tabs as Navbar
body: <p>fairly new to the coding space. I have tried looking everywhere for the answer to this question, and while I've found many answers, none of them work for me.</p>
  
  <p>My problem is that I would like to use @Material-UI tab components as a NavBar, and I can only seem to either 1. turn the tabs into static links that work but have no animation or indicator, or 2. keep the animations but have no functionality as far as changing the page goes.</p>
  
  <p>I have tried <a href="https://stackoverflow.com/questions/37843495/material-ui-adding-link-component-from-react-router">this</a>, <a href="https://github.com/mui-org/material-ui/issues/8313" rel="noreferrer">this</a>, <a href="https://github.com/mui-org/material-ui/issues/5574" rel="noreferrer">this</a>, and more, and many of the answers found within each of those.</p>
  
  <p><strong>Edit</strong>: <a href="https://github.com/bringreaner/reimagined-guacamole" rel="noreferrer">Here</a> is a Git Repo.</p>
  
  <p>Here is my NavBar component, currently on status #2 where it has animations but not functionality:</p>
  
  <pre><code>import React from 'react';
  import { Paper, Tabs, Tab } from '@material-ui/core';
  
  const navStyle= {
      backgroundColor: '#220000',
      color: '#fff',
  }
  
  export class NavBar extends React.Component {
      state = {
          value: 0,
      };
  
  handleChange = (event, value) =&gt; {
      event.preventDefault();
      this.setState({ value });
      console.log(value)
  };
  
  render() {      
      return (
          &lt;div&gt;
              &lt;Paper&gt;
                  &lt;Tabs
                      value={this.state.value}
                      onChange={this.handleChange}
                      indicatorColor={"secondary"}
                      // textColor="secondary"
                      centered
                      style={navStyle}
                  &gt;
                      &lt;Tab label="Home" href='/' /&gt;
                      &lt;Tab label="About" href='/about' /&gt;
                  &lt;/Tabs&gt;
              &lt;/Paper&gt; 
          &lt;/div&gt;
      )}
  } 
  </code></pre>
  
  <p>dependencies:</p>
  
  <pre><code>"@material-ui/core": "^1.3.1",
  "history": "^4.7.2",
  "prop-types": "^15.6.2",
  "react": "^16.4.1",
  "react-dom": "^16.4.1",
  "react-router-dom": "^4.3.1",
  "react-scripts": "1.1.4"
  </code></pre>