如何在 Next.js 中获取当前路线？

在本文中，我们将学习如何在 NextJS 项目中获取当前路由。

NextJS 是一个基于 React 的框架。它有能力为 Windows、Linux 和 mac 等不同平台开发漂亮的 Web 应用程序。动态路径的链接有助于有条件地渲染 NextJS 组件。

创建 NextJS 应用程序：您可以使用以下命令创建一个新的 NextJs 项目：

npx create-next-app gfg

项目结构：它看起来像这样。

在本文中，我们将研究在 NextJs 中获取当前路由的 3 种方法。

• 使用用户路由器（）。
• 使用 withRouter()。
• 在 getInitialProps 中使用 Context 道具。

让我们通过实现来了解所有三种方法。

方法一：使用 useRouter() 方法：在 NextJs 中我们可以很容易地使用 useRouter()函数获取当前路由的值。要使用它，我们将在 pages 目录中创建一个名为“ get-route.js ”的新页面。之后，我们将在 get-route.js 页面中添加以下代码。在下面的代码中，我们首先从下一个/路由器导入我们的 useRouter函数，然后我们创建一个名为 getRoute 的新函数，在其中，我们调用我们的 useRouter() 并将该变量存储在一个新的常量变量中命名路由器。之后，我们将显示路径名、asPath 和来自路由变量的查询。

Javascript

import React from 'react'
import {useRouter} from 'next/router';
  
export default function getRoute() {
    // Calling useRouter() hook
    const router = useRouter()
    return (
        

            
GeeksforGeeks
            
pathname:- {router.pathname}
            
query:- {router.query}
            
asPath:- {router.asPath}
        
    )
}

运行应用程序的步骤：通过在终端中键入以下命令来启动开发服务器。

npm run dev

输出：

在上面的例子中，首先，我们调用了我们的 useRouter() 钩子，然后，我们在控制台中显示了我们路由器的对象。

• 路径名：当前路线。那是'/pages'中页面的路径。
• query：解析为对象的查询字符串。
• asPath：浏览器中显示的路径（包括查询）。

但是 useRouter() 是一个反应钩子，所以如果你在类组件中使用它，这会出错。因此，如果我们将 getRoute()函数更改为具有相同内容的类，那么我们将得到以下输出。

在下面的代码中，我们只是将函数更改为类组件。

Javascript

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 (
            

                
GeeksforGeeks
            
        )
    }
}
  
export default getRoute

运行应用程序的步骤：通过在终端中键入以下命令来启动开发服务器。

npm run dev

输出：

所以要解决这个问题，我们可以使用 withRouter()。

方法二：使用 withRouter() 方法：使用 withRouter()可以方便的获取 react 类组件中当前路由的值。要使用它，您只需在 withRouter() 中导出您的类组件。在下面的代码中，首先，我们从 next/router 导入我们的 withRouter函数，然后我们创建一个名为 getRoute 的新类组件，在其中，在我们的渲染函数中，我们显示路径名、asPath 和查询从我们班收到的道具。之后，我们将导出我们的类 u=inside withRouter()函数。

Javascript

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 (
            

                
GeeksforGeeks
                
Using withRouter
            
        )
    }
}
  
export default withRouter(getRoute)

运行应用程序的步骤：通过在终端中键入以下命令来启动开发服务器。

npm run dev

输出：

方法3：使用getInitialProps() 方法：你也可以在getInitialProps()里面访问上下文props的路由值。 Context 属性包含你的路由信息，如 asPath、query 和 Pathname。在下面的代码中，首先，我们从 next/router 导入我们的 withRouter函数，然后我们创建一个名为 getRoute 的新类组件，并在其中创建一个包含上下文作为道具的异步 getIntitalProps函数。然后我们将上下文的值存储在一个新变量中并返回它们。然后在我们的渲染函数中，我们将显示路径名、asPath 和来自类中接收到的 props 的查询。

Javascript

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 (
            

                
GeeksforGeeks
                
Using Context prop in getInitialProps
            
        )
    }
}
  
export default getRoute

运行应用程序的步骤：通过在终端中键入以下命令来启动开发服务器。

npm run dev

输出：