title: Add Home page link to AppBar using Material-UI
body: <p>I'm new to React and am trying to add a "Home" page link to the AppBar component of Material-UI (version 4.0.1). The behaviour I'd like to see is that when clicking the "Home" link that component "OnePage" is displayed. </p>
  
  <p>In "OnePage" there is a link to another component "TwoPage", which should be the only content displayed when clicking on "ViewTwo page". However, currently both OnePage and TwoPage are displayed.</p>
  
  <p>Any help sorting out the navigation issue would be greatly appreciated!</p>
  
  <p>Here are the relevant files.</p>
  
  <p><strong>App.js</strong> </p>
  
  <pre><code>import React from 'react';
  import './App.css';
  import SearchBar from './SearchBar';
  import OnePage from './OnePage';
  import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
  
  function App() {
    return (
      &lt;div className="App"&gt;
        &lt;Router&gt;
          &lt;div&gt;
            &lt;SearchBar /&gt;
            &lt;Switch&gt;
              &lt;Route path="/" exact component={OnePage} /&gt;
            &lt;/Switch&gt;
          &lt;/div&gt;
        &lt;/Router&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  
  </code></pre>
  
  <p><strong>SearchBar/index.js</strong></p>
  
  <pre><code>import React from 'react';
  import { makeStyles } from '@material-ui/core/styles';
  import AppBar from '@material-ui/core/AppBar';
  import Toolbar from '@material-ui/core/Toolbar';
  import Typography from '@material-ui/core/Typography';
  import Button from '@material-ui/core/Button';
  import IconButton from '@material-ui/core/IconButton';
  import MenuIcon from '@material-ui/icons/Menu';
  import { NavLink, withRouter } from 'react-router-dom';
  
  const useStyles = makeStyles(theme =&gt; ({
      root: {
          flexGrow: 1,
      },
      menuButton: {
          marginRight: theme.spacing(2),
      },
      title: {
          flexGrow: 1,
      },
  }));
  
  function SearchBar() {
      const classes = useStyles();
      return (
          &lt;div className={classes.root}&gt;
              &lt;AppBar position="static"&gt;
                  &lt;Toolbar&gt;
                      &lt;IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="Menu"&gt;
                          &lt;MenuIcon /&gt;
                      &lt;/IconButton&gt;
                      &lt;NavLink to="/"&gt;
                          &lt;Typography variant="h6" className={classes.title}&gt;
                              Home
                          &lt;/Typography&gt;
                      &lt;/NavLink&gt;
                      &lt;Button color="inherit"&gt;Login&lt;/Button&gt;
                  &lt;/Toolbar&gt;
              &lt;/AppBar&gt;
          &lt;/div&gt;
      );
  }
  
  export default withRouter(SearchBar);
  </code></pre>
  
  <p><strong>OnePage/index.js</strong></p>
  
  <pre><code>import React from 'react';
  
  import { BrowserRouter as Router, Route, Link, withRouter } from 'react-router-dom'
  import { Container } from '@material-ui/core';
  
  import TwoPage from '../TwoPage';
  
  
  
  class OnePage extends React.Component {
      render() {
          return (
              &lt;Container&gt;
                  &lt;Router&gt;
                      &lt;div&gt;
                          &lt;span&gt;Test Page 1&lt;/span&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;Link to='/twoPage'&gt;View Two page&lt;/Link&gt;
                      &lt;/div&gt;
  
                      &lt;Route path="/twoPage" exact render={() =&gt; &lt;TwoPage /&gt;} /&gt;
                  &lt;/Router&gt;
              &lt;/Container&gt;
          )
      }
  }
  export default withRouter(OnePage);
  
  </code></pre>
  
  <p><strong>TwoPage/index.js</strong></p>
  
  <pre><code>import React from 'react';
  
  
  
  class TwoPage extends React.Component {
      render() {
          return (
              &lt;div&gt;
                  &lt;span&gt;Test Page 2&lt;/span&gt;
              &lt;/div&gt;
          )
      }
  }
  export default TwoPage;
  </code></pre>