La URL completa es /search-results?query=home+floor&categories=All+Categories . Quiero dividirlo en dos partes como esta: /search-results y query=home+floor&categories=All+Categories . Necesito la segunda parte de la url. ¿Cómo puedo hacer esto en reactjs/nextjs o en javascript?
Usawindow.location para lograr esto:
var path = window.location.pathname; //should be /search-result var queryString = substr(window.location.search, 1); //should be query=home+floor&categories=All+Categories EDITAR: en Next.js también puede usar next/router (en un componente React)
import { useRouter } from 'next/router' // in component const router = useRouter(); const {pathname, query} = router; //pathname and query are what you are looking for.Puede usar simplemente la función .split() en la cadena, dividiéndola por el carácter "?":
let uri = "/search-results?query=home+floor&categories=All+Categories"; let parts = uri.split("?"); let path = parts[0]; // "/search-results" let query = parts[1]; // "query=home+floor&categories=All+Categories"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split
Cuando se trabaja con ubicaciones en aplicaciones next.js, normalmente es mejor usar el enlace de enrutador integrado. Si bien depender de la window funcionaría para la representación del lado del cliente, es posible que tenga problemas cuando next.js está representando algo en el lado del servidor.
import { useRouter } from 'next/router' function YourComponent() { const router = useRouter() const parts = router.asPath.split('?') // ... } Esto le daría una matriz en la variable de rutas donde paths[0] es /search-results y paths[1] contiene su consulta. Sin embargo, dependiendo de su caso de uso, podría ser mejor usar simplemente router.query , que le brinda la parte de consulta analizada.
La documentación para next/router es bastante buena.