title: Semantic-UI Sidebar.Pusher causing react router to rerender its component
body: <p>I am using the react router and semantic-ui sidebar. When the sidebar is toggled between visible and invisible, the router triggers its component (<code>OilBarrelComponent</code>) to be recreated (rather than just 'pushed'). This seems unnecessary and has side effects that i don't want. Is there something wrong with my code that causes the <code>OilBarrelContainer</code> component to be recreated just because I toggle the sidebar?</p>
  
  <pre><code>import {BrowserRouter as Router, Route, Link, Switch} from 'react-router-dom';
  import {Sidebar, Segment, Button, Menu, Icon} from 'semantic-ui-react'
  
    toggleSidebarVisibility = () =&gt; this.setState({ sidebarVisible: !this.state.sidebarVisible })
  
    render() {
      const { sidebarVisible } = this.state
  
      return (
      &lt;Router history={history}&gt;
        &lt;div&gt;
          &lt;Sidebar.Pushable className="phsidebar" as={Segment}&gt;
            &lt;Sidebar as={Menu} animation='push' width='thin'  visible={sidebarVisible} icon='labeled' vertical inverted&gt;
              &lt;Menu.Item className="sidebaritem" as={Link} to='/oilbarrel'&gt;
                Gauge
              &lt;/Menu.Item&gt;
            &lt;/Sidebar&gt;
            &lt;Sidebar.Pusher&gt;
              &lt;div&gt;
                &lt;MessagesContainer/&gt;
                &lt;Switch&gt;
                  &lt;Route exact path="/" component={() =&gt; (&lt;Home /&gt;)}/&gt;
                  &lt;Route exact path="/oilbarrel" component={() =&gt; (&lt;OilBarrelContainer timer={true} topMargin={0} width={300} height={400} labelText={"Diesel"}/&gt;)}/&gt;
                &lt;/Switch&gt;
              &lt;/div&gt;
            &lt;/Sidebar.Pusher&gt;
          &lt;/Sidebar.Pushable&gt;
        &lt;/div&gt;
  
      &lt;/Router&gt;
      )};
  </code></pre>