title: Persist dom state on route change
body: <p>I have two components each on separate routes. I would like to know how I can keep the DOM elements in the same state on route change. For example I would like for all the DOM elements to have the same css classes applied as before the route change when navigating back to the same component. </p>
  
  <p>I have tried redux persist and using nested routes with switch but none of these seem to work. From the research I have done it appears that React always mounts and unmount the component on route change and I haven't' been able to find a way to prevent this happening.</p>
  
  <p>I would like for the red background color to remain when going back to test1.</p>
  
  <pre><code>class test1 extends React.Component {
      constructor(props) {
          super(props);
      }
  
      addClassFucn = event =&gt; {
          $(event.target).parent().css("background-color", "red")
      }
  
      renderButton() {
          return (
              &lt;div&gt;
                  &lt;div&gt;
                      &lt;button onClick={this.addClassFucn}&gt;Click me&lt;/button&gt;
                      &lt;Link to="/test2" className="ui button primary back" &gt;
                          test2
                      &lt;/Link&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  
      render() {
          return (
              &lt;div&gt;
                  &lt;div&gt;This is test 1{this.renderButton()}&lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default test1;
  
  
  class test2 extends React.Component {
      constructor(props) {
          super(props);
      }
  
      renderButton() {
          return (
              &lt;div&gt;
                  &lt;Link to="/test1" className="ui button primary back" &gt;
                      back
                  &lt;/Link&gt;
              &lt;/div&gt;
          )
      }
  
      render() {
          return (
              &lt;div&gt;
                  &lt;div&gt;This is test 2{this.renderButton()}&lt;/div&gt;
  
              &lt;/div&gt;
          );
      }
  }
  
  
  export default test2;
  </code></pre>