Estoy tratando de configurar location.query usando react.router.dom v6. Como configuro mi consulta dentro del servicio, no puedo usar el gancho, así que uso const history = createBrowserHistory()

Este código está configurando una consulta, pero si cambio la página, desaparecerá. Funcionará si después de configurar la consulta actualizo la página. En este caso, la consulta funcionará bien. Creo que este es el problema de usar el enrutador v6, creé un enrutador personalizado pero no ayudó. Tal vez exista de alguna manera para arreglar esto?

historia.ts

 import { createBrowserHistory } from 'history' export const history = createBrowserHistory() export const getQueryPathname = (): string => history.location.pathname export const setUrlQuery = <T>(urlQueryName: string, urlQuery: T): void => { const pathname = getQueryPathname() history.push({ pathname: pathname, search: `?${urlQueryName}=${String(urlQuery)}`, }) }

Enrutador personalizado

 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<CustomRouterProps> = ({ history, ...props }) => { const [state, setState] = useState({ action: history.action, location: history.location, }) useLayoutEffect(() => history.listen(setState), [history]) return <Router {...props} location={state.location} navigationType={state.action} navigator={history} /> } export default CustomRouter

servicio donde uso setUrlQuery

 testFunction(id: number): void { setUrlQuery('query', id) // some other logic }