title: React Router <Link> to dynamic page and go back to previous state in useEffect
body: <p>I'm trying to make a React app with dynamic pages and navigational fetch with next and previous buttons, when click on the Item  it shows the page dynamic page but when I press the back button on the browser it forgets the state where count and input value and shows the initial state. What should I write to save the state so that when I go back it stays on the same count and value and not start from initial state?</p>
  
  <pre><code>const App = () =&gt; {
      return (
          &lt;Router&gt;
              Route path='/item/:id' component={Item} /&gt;
              Route path='/' exact component={Search} /&gt;
          &lt;/Router&gt;
      )
  }
  
  const Items = (props) =&gt; {
      return (
          &lt;div&gt;
              {props.data.map(image =&gt; (
                  /* Link to component Item */ 
                  &lt;Link to={`/item/${image.id}`} key={image.id}&gt;
                  &lt;img src={image.urls.small} alt={image.description} /&gt;
                  &lt;/Link&gt;
              ))}
          &lt;/div&gt;
      );
  }
  
  const Search = () =&gt; {
      useEffect(() =&gt; {
          getData();
      },[count]);
  
      const nextPage = (event) =&gt; {
          setCount(count + 1);
          getData();
          event.preventDefault();
      }
  
      const prevPage = event =&gt; {
          if (count &gt; 1) {
              setCount(count - 1);
              getData();
          }
      event.preventDefault();
      }
  
      return (
          &lt;div&gt;
              &lt;Items data={images} /&gt;
              &lt;button onClick={prevPage}&gt;PREV&lt;/button&gt;
              &lt;button onClick={nextPage}&gt;NEXT&lt;/button&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>