title: react-router v6: Navigate to a URL with searchParams
body: <p>I'm using react-router v6. I want to navigate to a URL that has searchParams, but I'm not seeing a way to do this out of the box. <code>useNavigate</code> allows me to navigate to a URL by passing in a string. <code>useSearchParams</code> allows me to set searchParams on the current page.</p>
  <p>I could generate the searchParams using <code>createSearchParams</code> and then convert it to a string and append it to the end of the URL with a <code>?</code> in between, but that seems like a hack.</p>
  <p>I'd like to be able to do something like:</p>
  <pre class="lang-js prettyprint-override"><code>const navigate = useNavigate();
  
  // listing?foo=bar
  navigate(&quot;listing&quot;, {
      params: {
          foo: &quot;bar&quot;
      }
  });
  </code></pre>
  <p>My hacky workaround:</p>
  <pre><code>function useNavigateParams() {
      const navigate = useNavigate();
  
      return (url: string, params: Record&lt;string, string | string[]&gt;) =&gt; {
          const searchParams = createSearchParams(params).toString();
          navigate(url + &quot;?&quot; + searchParams);
      };
  }
  
  const navigateParams = useNavigateParams();
  
  navigateParams(&quot;listing&quot;, {
      foo: &quot;bar&quot;
  });
  </code></pre>
  <p>Did I miss something from the documentation?</p>