Next.js Inyectando el enrutador

En este artículo, aprenderemos cómo podemos inyectar el enrutador en nuestro proyecto NextJS. NextJS es un marco basado en React. Tiene el poder de desarrollar hermosas aplicaciones web para diferentes plataformas como Windows, Linux y Mac.

Next.js tiene un enrutador basado en un sistema de archivos basado en el concepto de páginas. Cuando se agrega un archivo al directorio de páginas, está disponible automáticamente como una ruta. Para acceder al objeto del enrutador en un componente de React, puede usar useRouter o withRouter y esto se denomina inyectar el enrutador.

Crear aplicación NextJS: puede crear un nuevo proyecto NextJs usando el siguiente comando:

npx create-next-app gfg

Estructura del proyecto: Se verá así.

Podemos inyectar el enrutador en las páginas de NextJs para acceder al objeto del enrutador. Puedes hacer esto usando 2 funciones: –

• Usando usarRouter()
• Uso con enrutador()

1. Usando useRouter(): En NextJs podemos obtener fácilmente el valor de la ruta actual usando la función useRouter(). Para usar esto, vamos a crear una nueva página dentro de nuestro directorio de páginas con el nombre ‘ getrouter.js ‘. Después de eso, agregaremos el siguiente código a nuestra página getrouter.js. En el siguiente código primero, estamos importando nuestra función useRouter desde el siguiente/router, luego estamos creando una nueva función con el nombre de CurrentRoute y dentro de eso, estamos llamando a nuestro useRouter() y almacenando esa variable en una nueva variable constante enrutador nombrado. Después de eso, mostraremos el nombre de ruta, asPath y la consulta de la variable de ruta.

import React from 'react'
import {useRouter} from 'next/router';
  
export default function CurrentRoute() {
    // Calling useRouter() hook
    const router = useRouter()
    console.log(router.query)
    return (
        <div>
            <h1>GeeksforGeeks</h1>
            <h2>pathname:- {router.pathname}</h2>
            <h2>asPath:- {router.asPath}</h2>
        </div>
    )
}

Paso para ejecutar la aplicación: Inicie el servidor de desarrollo escribiendo el siguiente comando en la terminal.

npm run dev

Producción:

2. Uso de withRouter(): no puede usar el gancho useRouter() en el componente de clase de reacción. Entonces, si desea acceder a los datos del objeto de ruta dentro de un componente de clase, debe usar la función Router(). En nuestro archivo getrouter.js , cambie el contenido al siguiente contenido.

import React from 'react'
import {withRouter} from 'next/router';
  
export class CurrentRoute extends React.Component {
      
    render() {
        return (
            <div>
                <h1>GeeksforGeeks</h1>
                <h2>pathname:- {this.props.router.pathname}</h2>
                <h2>asPath:- {this.props.router.asPath}</h2>
            </div>
        )
    }
}
  
export default withRouter(getRoute)

Aquí solo estamos cambiando nuestra función CurrentRoute en un componente de clase de reacción y exportándola usando withRouter.

Paso para ejecutar la aplicación: Inicie el servidor de desarrollo escribiendo el siguiente comando en la terminal.

npm run dev

Producción: