Te damos el hallazgo a este dilema, al menos eso creemos. Si continuas con interrogantes compártelo en un comentario, para nosotros será un placer ayudarte
Solución:
Utilice el gancho del enrutador.
Puedes usar el useRouter hook en cualquier componente de su aplicación.
https://nextjs.org/docs/api-reference/next/router#userouter
pasar parámetro
import Link from "next/link";
path
O
import Router from 'next/router'
Router.push(
pathname: '/search',
query: keyword: 'this way' ,
)
En componente
import useRouter from 'next/router'
export default () =>
const router = useRouter()
console.log(router.query);
...
url prop está en desuso a partir de la versión 6 de Next.js: https://github.com/zeit/next.js/blob/master/errors/url-deprecated.md
Para obtener los parámetros de consulta, utilice getInitialProps:
Para componentes sin estado
import Link from 'next/link'
const About = (query) => (
Click here to read more
)
About.getInitialProps = (query) =>
return query
export default About;
Para componentes regulares
class About extends React.Component
static getInitialProps(query)
return query
render()
console.log(this.props.query) // The query is available in the props object
return Click here to read more
El objeto de consulta será como: url.com?a=1&b=2&c=3 se convierte en: a:1, b:2, c:3
Usando Next.js 9 o superior, puede obtener parámetros de consulta:
Con router:
import useRouter from 'next/router'
const Index = () =>
const router = useRouter()
const id = router.query
return(id)
Con getInitialProps:
const Index = (id) =>
return(id)
Index.getInitialProps = async ( query ) =>
const id = query
return id
Si te gustó nuestro trabajo, eres capaz de dejar una división acerca de qué le añadirías a esta división.