title: Caching with react-query and react-router-dom
body: <p>I'm trying out <a href="https://react-query.tanstack.com/" rel="noreferrer">react-query</a> and want to see it caching.  I have a page that gets a list of Books.</p>
  <p><em>Note, some code obviously left out for brevity just trying to show the important parts.</em></p>
  <pre><code>const useBooks = options =&gt; {
    return useQuery(['books', options], bookApi.fetchBooks(options));
  }
  
  const Books = () =&gt; {
    useEffect(() =&gt; () =&gt; console.log(&quot;unmount&quot;), []);
    const [options, setOptions] = useState({}); // options ex: { page: 1, search: &quot;test&quot;}
    const {error, isLoading, data} = useBooks(options);
  
    return books.map(book =&gt; &lt;div&gt;{book.name}&lt;/div&gt;;
  }
  </code></pre>
  <p>Now this Books is a &quot;page&quot; in my app using <a href="https://reactrouter.com/web/guides/quick-start" rel="noreferrer">react-router-dom</a>:</p>
  <pre><code>const App = () =&gt; {
  
    return (
      &lt;Router&gt;
        &lt;&gt;
          &lt;Route exact path=&quot;/&quot;&gt;
            &lt;Home /&gt;
          &lt;/Route&gt;
          &lt;Route path=&quot;/books&quot;&gt;
            &lt;Books /&gt;
           &lt;/Route&gt;
        &lt;/&gt;
       &lt;/Router&gt;
      )
    }
  </code></pre>
  <p>When I go back and forth between &quot;Home&quot; and &quot;Books&quot; (by clicking Nav links in my app) I see the books fetch hitting the network every time.  I also see &quot;unmount&quot; in the console.</p>
  <p>I originally had the Routes wrapped in a <a href="https://reactrouter.com/web/api/Switch" rel="noreferrer">Switch</a>, and removed this but the Books component still appears to unmount.  I am hoping it will not unmount and I will not see the network fetch, and the books will be pulled from the react-query cache.  I also tried making the useBooks hook not use the search options param but the results were the same.</p>
  <p>How do I use avoid the network fetch in my scenario?</p>