title: Prevent react route unmounting component on state change
body: <p>I'm using react-router (v.4.3.1) to render the main part of my application and I have a drawer on the left side with the menu. When a button is toggled in the app header I'm changing the state of the collapsed variable so that the components re-render the css accordantly. My problem is this variable needs to be stored on the component rendering all my <code>Route</code> and when the component is updated <code>Route</code> is unmounting and mounting it's component.</p>
  
  <p>I've already tried to provide a <code>key</code> to my <code>Route</code> but it's not working.</p>
  
  <p>My code looks like this and the parent of this component is the one being updated which re-renders my <code>Main</code> component:</p>
  
  <pre><code>class Main extends Component {
      constructor(props) {
          super(props);
          this.observer = ReactObserver();
      }
  
      getLayoutStyle = () =&gt; {
          const { isMobile, collapsed } = this.props;
          if (!isMobile) {
              return {
                  paddingLeft: collapsed ? '80px' : '256px',
              };
          }
          return null;
      };
  
      render() {
          const RouteWithProps = (({index, path, exact, strict, component: Component, location, ...rest}) =&gt;
                  &lt;Route path={path}
                         exact={exact}
                         strict={strict}
                         location={location}
                         render={(props) =&gt; &lt;Component key={"route-" + index} observer={this.observer} {...props} {...rest} /&gt;}/&gt;
          );
  
          return (
              &lt;Fragment&gt;
                  &lt;TopHeader observer={this.observer} {...this.props}/&gt;
                  &lt;Content className='content' style={{...this.getLayoutStyle()}}&gt;
                      &lt;main style={{margin: '-16px -16px 0px'}}&gt;
                          &lt;Switch&gt;
                              {Object.values(ROUTES).map((route, index) =&gt; (
                                  &lt;RouteWithProps {...route} index={index}/&gt;
                              ))}
                          &lt;/Switch&gt;
                      &lt;/main&gt;
                  &lt;/Content&gt;
              &lt;/Fragment&gt;
          );
      }
  }
  </code></pre>
  
  <p>I would like the Route just to update and not to unmount the component. is this possible?</p>