title: How to set location query using react.router.dom v6?
body: <p>I am trying to set  location.query using react.router.dom v6. As I set my query inside service I can not use hook so I use
  <code>const history = createBrowserHistory()</code></p>
  <p>This code is setting query, but if I change the page it will disappear. It will work if after setting the query I will refresh the page. In this case, the query will work fine. I think this is the issue of using router v6, I created a custom router but it didn't help. Maybe exist somehow to fix this?</p>
  <p>history.ts</p>
  <pre><code>import { createBrowserHistory } from 'history'
  
  export const history = createBrowserHistory()
  export const getQueryPathname = (): string =&gt; history.location.pathname
  export const setUrlQuery = &lt;T&gt;(urlQueryName: string, urlQuery: T): void =&gt; {
    const pathname = getQueryPathname()
    history.push({
      pathname: pathname,
      search: `?${urlQueryName}=${String(urlQuery)}`,
    })
  }
  </code></pre>
  <p>Custom Router</p>
  <pre><code>import { History } from 'history'
  import React, { useLayoutEffect, useState } from 'react'
  import { Router, RouterProps } from 'react-router-dom'
  
  interface CustomRouterProps {
    history: History
    props?: RouterProps
  }
  
  const CustomRouter: React.FC&lt;CustomRouterProps&gt; = ({ history, ...props }) =&gt; {
    const [state, setState] = useState({
      action: history.action,
      location: history.location,
    })
  
    useLayoutEffect(() =&gt; history.listen(setState), [history])
  
    return &lt;Router {...props} location={state.location} navigationType={state.action} navigator={history} /&gt;
  }
  
  export default CustomRouter
  </code></pre>
  <p>service where I use setUrlQuery</p>
  <pre><code>  testFunction(id: number): void {
      setUrlQuery('query', id)
      // some other logic
    }
  </code></pre>