Tengo un problema con el uso de parámetros de consulta y el dom del enrutador de reacción.
Cuando realizo una llamada a la API y me devuelve un estado 200, redirijo al usuario a la página de resultados con un history.push. Hasta ahora todo funciona bien. Sin embargo, cuando estoy en la página de resultados y actualizo la página, quiero usar la URL con parámetros de consulta para realizar una nueva búsqueda, desafortunadamente React Router Dom no puede reconocer la URL y me redirige.
Aplicación.tsx
<PrivateRoute path="/search?value=:searchValue&type=:searchType"> <Dashboard /> </PrivateRoute> <Route path="/redirection" component={RedirectionPage} /> <Redirect to="/login" />Buscar.tsx
history.push({ pathname: `/search?${formattedSearch .map((search) => `value=${search.value}&type=${search.type}`) .toString() .replace(",", "|")}`, state: search });Este history.push funciona muy bien y redirige al usuario a la página deseada.
Pero cuando actualizo la página con la misma URL, React Router Dom no reconoce la ruta y no me redirige al componente.
Tienes alguna idea ? Gracias y le deseo un buen día.
Los parámetros de coincidencia de ruta no son lo mismo que los parámetros de cadena de consulta de URL.
Deberá acceder a la cadena de consulta desde el objeto de ubicación .
{ key: 'ac3df4', // not with HashHistory! pathname: '/somewhere', search: '?some=search-string', <-- query string hash: '#howdy', state: { [userDefined]: true } }
Demostración de parámetros de consulta de React-router-dom
Crean un useQuery personalizado:
const useQuery = () => new URLSearchParams(useLocation().search); Para su caso de uso, en la página que muestra el Dashboard que desea extraer, luego extraiga los parámetros de la cadena de consulta. Dado path='/search?value=:searchValue&type=:searchType' :
const query = useQuery(); const email = query.get('value'); const token = query.get('type'); Si Dashboard es un componente basado en clases, deberá acceder a props.location y procesar la cadena de consulta usted mismo en un método de ciclo de vida. Esto se debe a que los ganchos de React solo los utilizan de forma válida los componentes funcionales.
componentDidMount() { const { location } = this.props; const query = new URLSearchParams(location.search); const email = query.get('value'); const token = query.get('type'); ... } path='/search?value=:searchValue&type=:searchType' Los parámetros de la ruta solo son relevantes en la parte de la ruta de una URL, no puede definir parámetros para la parte de la cadena de consulta de la URL. La ruta anterior es equivalente a path='/search' desde la perspectiva de react-router-dom .
<PrivateRoute path="/search"> <Dashboard /> </PrivateRoute>