title: Keep state while navigating between component in react-router
body: <p>Let's say I want to have a reusable react component in my project. I also want that component to have its state under different locations without losing it during component unmount. What is the correct way to deal with this kind of architecture in React? In other words, when the user navigates between these two routes react unmounts the previous component, therefore it loads remote data on every navigation between /user and /groups routes.
  I also know that there is something called Redux. I don't see a clear way how to do it using reduct. Do I need two reducers? one for Users and the other for Groups? If so it's quite inconvenient creating a new reducer and write new logic each time when I need to use ReusableComponent.<br />
  Here is a similar skeleton to describe what I am trying to do. Any hint would be helpful.</p>
  <pre><code>//Router example
  &lt;Router&gt;
     &lt;Switch&gt;
         &lt;Route exact path=”/users” &gt;
             &lt;UserComponent&gt;
                 &lt;ReusableComponent url=”http://apidomain.com/users” /&gt;
             &lt;/UserComponent&gt;
         &lt;/Route&gt;
       &lt;Route exact path=”/groups” &gt;
             &lt;GroupComponent&gt;
                 &lt;ReusableComponent url=”http://apidomain.com/groups” /&gt;
             &lt;/GroupComponent&gt;
         &lt;/Route&gt;
     &lt;/Switch&gt;
  &lt;/Router&gt;
  
  //ReusableComponent Example
  &lt;ReusableComponent&gt;
      ---&gt;use url, that passed from parent component tree(users or groups) to load data and keep in state
      &lt;ReusableComponentContext&gt; 
          &lt;Head /&gt;
          &lt;Body /&gt;
          &lt;Footer /&gt;
     &lt;/ReusableComponentContext&gt;
  &lt;/ReusableComponent&gt;
  </code></pre>
  <p><strong>EDIT</strong>
  So to describe my problem better is I need to have the same component with two or more parallel state on the different locations without overriding each other. If it's possible</p>