title: Bottom navigation disappears when route clicked
body: <p>I have a very basic app where I am trying to learn react-router and how I can use it for other apps. When I use the bottom navigation to navigate to a new route, my bottom navigation disappears.</p>
  
  <p>I have tried putting my routes at the bottom of the App component but nothing seems to help. If I reload the /meals route manually the navigation re-appears.</p>
  
  <p>Here is my root app component</p>
  
  <pre class="lang-js prettyprint-override"><code>const App: React.FC = () =&gt; {
    return (
      &lt;Router&gt;
        &lt;div&gt;
          &lt;NavBar sideBarOpen={false}/&gt;
  
          &lt;main&gt;
            &lt;Switch&gt;
              &lt;Route path="/meals" component={Meals} /&gt;
            &lt;/Switch&gt;
          &lt;/main&gt;
  
          &lt;BottomNav /&gt;
        &lt;/div&gt;
      &lt;/Router&gt;
    );
  }
  </code></pre>
  
  <p>Here is my meals component</p>
  
  <pre class="lang-js prettyprint-override"><code>class Meals extends React.Component{
  
      public render() {
  
          return (
              &lt;div&gt;
                  &lt;div&gt;Meals Component&lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  </code></pre>
  
  <p>On initial app load, I can see both navigation menus:</p>
  
  <p><a href="https://imgur.com/CT0wV7k" rel="nofollow noreferrer">See initial load</a></p>
  
  <p>When I click on the meals nav link, my bottom nav is removed:</p>
  
  <p><a href="https://imgur.com/oyml1PU" rel="nofollow noreferrer">Missing bottom nav</a></p>
  
  <p>Here is my bottom nav component. I am using the react-router redirect to change routes.</p>
  
  <pre class="lang-js prettyprint-override"><code>class BottomNav extends React.Component&lt;BottomNavProps,BottomNavState&gt;{
  
      constructor(props: BottomNavProps) {
          super(props);
          this.state = {
              route : '/' 
          }     
          this.setRoute = this.setRoute.bind(this);
      }
  
      public setRoute = (route: string) =&gt; {
          this.setState({
              route: route
          })
      }
  
      public render() {
  
          if (this.state.route === "meals") {
              return &lt;Redirect to='/meals' /&gt;
          }
  
          return (
              &lt;div className="grow"&gt;
                  &lt;BottomNavigation className="bottomNavigation" value={this.state.route} onChange={(event, newValue:string) =&gt; { this.setRoute(newValue); }} showLabels&gt;
                      &lt;BottomNavigationAction label="Home" icon={&lt;HomeIcon /&gt;} value=""/&gt;
                      &lt;BottomNavigationAction label="Lists" icon={&lt;PlaylistAddCheckIcon /&gt;} value="lists" /&gt;
                      &lt;BottomNavigationAction label="Menus" icon={&lt;MenuBookIcon /&gt;} value="menus" /&gt;
                      &lt;BottomNavigationAction label="Meals" icon={&lt;RestaurantMenuIcon /&gt;} value="meals" /&gt;
                      &lt;BottomNavigationAction label="more" icon={&lt;MoreHorizIcon /&gt;} /&gt;
                  &lt;/BottomNavigation&gt;
              &lt;/div&gt;
          )
      }
  }
  </code></pre>
  
  <p>I want to be able to maintain my top/bottom/drawer navigation while navigating through the app. What am I doing wrong?</p>