获取当前路由名称 nextjs

在Next.js中，我们可以使用Router对象来获取当前路由的信息。Router对象提供了许多有用的方法，如获取当前路由名称、参数和查询字符串等。

获取当前路由名称

要获取当前路由的名称，我们可以使用Router对象的pathname属性。这个属性表示当前页面的路径名称。

import { useRouter } from 'next/router'

function MyComponent() {
  const router = useRouter()

  console.log(router.pathname) // 输出当前路由名称
  // ...
}

在上面的代码中，我们首先导入useRouter hook，然后使用它创建一个Router对象。然后，我们可以使用router.pathname属性来获取当前路由的名称，并将其打印到控制台。

获取路由参数

如果我们的路由包含参数，例如/post/[id]，我们可以通过Router对象的query属性来获取它们。

import { useRouter } from 'next/router'

function Post() {
  const router = useRouter()
  const { id } = router.query

  return <h1>Post: {id}</h1>
}

在上面的代码中，我们使用路由参数来动态呈现一个Post组件。我们创建了一个名为id的常量，然后使用router.query对象来获取参数的值。最后，我们将参数的值呈现在页面上。

获取查询参数

如果我们在路由上使用查询参数，例如/search?q=hello，我们可以通过Router对象的query属性来获取它们。

import { useRouter } from 'next/router'

function SearchResults() {
  const router = useRouter()
  const { q } = router.query

  return <h1>Search Results for: {q}</h1>
}

在上面的代码中，我们使用查询参数来呈现一个搜索结果组件。我们创建了一个名为q的常量，然后使用router.query对象来获取查询参数的值。最后，我们将查询参数的值呈现在页面上。

参考文献：Next.js Docs