如何在 Next.js 中使用 next/navigation 获取 URL 段

Question

我目前正在开发一个 Next.js 项目，我正在尝试使用

useSearchParams

或

useParams

挂钩从

next/navigation

访问 URL 段。我使用了 Rewriteparameters 将

source: '/chat/:id'

映射到

destination: '/chat'

，因此它会被重写到带有

:id

段的聊天页面。但是，我遇到了一个问题，useParams 返回空对象，而 useSearchParams 返回 null。

import { useParams, useSearchParams } from 'next/navigation'

export default function MyComponent() {
  // Current URL -> '/chat/1' (/chat/:id)
  const params = useParams()
  const searchParams = useSearchParams()
  console.log("params", params) // This logs an empty object {}
  console.log("searchParams", searchParams.get("id")) // This logs null
}

我知道 useParams 只返回像 /chat/[id] 这样的

动态参数

，但是当我导航到像

/chat/:id

这样的 URL 时，我希望

searchParams.get("id")

返回

:id

的值，但它返回 null。使用

router.query

中的

next/router

，它给出了正确的值。有没有办法使用

:id

访问

next/navigation

段？

这是

useSearchParams

和

useParams

在尝试访问 URL 段时的预期行为吗？还是我遗漏了什么？

附注

next/navigation

似乎也没有导出

beforePopstate

或其他路由器事件。

编辑：刚刚意识到

usePathname()

返回带有

:id

段的路径名，这与从

next/router

返回的路径名值的行为不同，后者仅返回

/chat

，这才是实际的路径名。

Answer 1

useSearchParams

钩子函数用于获取页面路径名后面的值，例如过滤器和其他值。 例如，您可以将

http://appname/chat/:id

作为路径名，并且可以在浏览器中搜索

http://appname/1?value=2

。

使用

useSearchParams().get("value")

，您将获得值

2

，使用

useParams().id

，您将获得值

1

。您应该使用

useParams

获取放置在路径名内的值，并使用

useSeachParams

获取其后面的值。