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

在 Next.js 中，您可以使用 Next.js Router API 来获取当前路由。

要使用 Next.js Router API，您需要首先导入 useRouter 函数，然后调用该函数以获取 router 对象。

import { useRouter } from 'next/router'

function MyComponent() {
  const router = useRouter()

  // 在此处使用 router 对象
  // ...
}

通过 router 对象，您可以使用以下方法和属性来获取当前的路由：

router.pathname

用于获取当前路由的路径，不包括查询参数。

import { useRouter } from 'next/router'

function MyComponent() {
  const router = useRouter()

  console.log(router.pathname) // 输出当前路由的路径
  // ...
}

router.query

用于获取当前路由的查询参数，返回一个 key-value 对象。

import { useRouter } from 'next/router'

function MyComponent() {
  const router = useRouter()

  console.log(router.query) // 输出当前路由的查询参数
  // ...
}

例如，对于路由 /post?id=123&slug=hello-world，router.query 会返回 { id: '123', slug: 'hello-world' }。

router.asPath

用于获取当前路由的完整路径，包括查询参数和哈希值（如果有）。

import { useRouter } from 'next/router'

function MyComponent() {
  const router = useRouter()

  console.log(router.asPath) // 输出当前路由的完整路径
  // ...
}

示例代码片段

以下是一个示例代码片段，演示如何在 Next.js 中获取当前路由的路径和查询参数。

import { useRouter } from 'next/router'

function MyComponent() {
  const router = useRouter()

  return (
    <div>
      <p>当前路由路径：{router.pathname}</p>
      <p>当前路由查询参数：
        {Object.entries(router.query).map(([key, value]) => (
          <span key={key}>{key}: {value} </span>
        ))}
      </p>
    </div>
  )
}