¿Cómo obtener la ruta actual en Next.js?

En este artículo, aprenderemos cómo podemos obtener la ruta actual 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. La vinculación de rutas dinámicas ayuda a representar sus componentes NextJS de forma condicional.

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í.

En este artículo, veremos 3 métodos para obtener la ruta actual en NextJs.

• Usando useRouter().
• Usando withRouter().
• Usando contexto prop en getInitialProps.

Entendamos los tres métodos con la implementación.

Método 1: Usando el método 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 ‘ get-route.js ‘. Después de eso, agregaremos el siguiente código en nuestra página get-route.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 getRoute 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 getRoute() {
    // Calling useRouter() hook
    const router = useRouter()
    return (
        <div>
            <h1>GeeksforGeeks</h1>
            <h2>pathname:- {router.pathname}</h2>
            <h2>query:- {router.query}</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:

En el ejemplo anterior, primero estamos llamando a nuestro enlace useRouter() y después de eso, estamos mostrando los objetos de nuestro enrutador en la consola.

• ruta:  ruta actual. Esa es la ruta de la página en ‘/pages’.
• consulta: la string de consulta analizada en un objeto.
• asPath: la ruta (incluida la consulta) que se muestra en el navegador.

Pero useRouter() es un gancho de reacción, por lo que si usa esto dentro de un componente de clase y esto dará un error. Entonces, si cambiamos nuestra función getRoute() a una clase con el mismo contenido, obtendremos el siguiente resultado.

En el siguiente código, solo estamos cambiando nuestra función a un componente de clase.

import React from 'react'
import {useRouter} from 'next/router';
  
export class getRoute extends React.Component {
      
    render() {
        // Calling useRouter() hook
        const router = useRouter()
        console.log(router.pathname)
        console.log(router.query)
        console.log(router.asPath)
        return (
            <div>
                <h1>GeeksforGeeks</h1>
            </div>
        )
    }
}
  
export default getRoute

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

npm run dev

Producción:

Entonces, para solucionar esto, podemos usar withRouter().

Método 2: Usando withRouter() Método: Puede obtener fácilmente el valor actual del enrutador en el componente de clase de reacción usando withRouter(). Para usar esto, solo tiene que exportar su componente de clase dentro de withRouter(). En el siguiente código primero, estamos importando nuestra función withRouter desde el siguiente/router, luego estamos creando un nuevo componente de clase con el nombre de getRoute y dentro de eso, en nuestra función de representación, estamos mostrando el nombre de ruta, asPath y consulta de los apoyos recibidos en nuestra clase. Después de eso, estamos exportando nuestra clase u=dentro de la función withRouter().

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

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

npm run dev

Producción:

Método 3: usar el método getInitialProps(): también puede acceder al valor de la ruta del accesorio de contexto dentro de getInitialProps(). La propiedad de contexto contiene información de sus rutas como asPath, query y Pathname. En el siguiente código primero, estamos importando nuestra función withRouter desde el siguiente/enrutador, luego estamos creando un nuevo componente de clase con el nombre de getRoute y dentro de eso, estamos creando una función asíncrona getIntitalProps que contiene contexto como accesorio. Luego estamos almacenando valores de contexto en una nueva variable y devolviéndolos. Luego, en nuestra función de representación, mostramos el nombre de la ruta, asPath y la consulta de los accesorios recibidos en nuestra clase. 

import React from 'react'
import {withRouter} from 'next/router';
  
export class getRoute extends React.Component {
  
    static async getInitialProps(context) {
        // Using context prop to get asPath, query, context
        const {asPath, query, pathname} = context 
        return{asPath, query, pathname}
    }
      
    render() {
        // Consoling the values
        console.log(this.props.pathname)
        console.log(this.props.query)
        console.log(this.props.asPath)
        return (
            <div>
                <h1>GeeksforGeeks</h1>
                <h2>Using Context prop in getInitialProps</h2>
            </div>
        )
    }
}
  
export default getRoute

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

npm run dev

Producción: