reactjs 如何在Next.js 13客户端组件中从URL(查询参数)中检索Id [已关闭]

lpwwtiir 于 2023-06-22 发布在 React

关注(0)|答案(3)|浏览(111)

**关闭。**此题需要debugging details。目前不接受答复。

编辑问题以包括desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem。这将帮助其他人回答这个问题。
21小时前关门了。
Improve this question
我有一个问题，我使用Next.js 13，但我不能在客户端组件useRouter从next/router中使用它我如何从URL中检索我的案例eventId？
我从PaidsCard组件重定向到event details页面，当我单击一些图像时，我想切换到事件详细信息页面，在那里我想获取与PaidCards组件中相同的图像
我想从URL中检索eventId值并传递到事件详细信息页面以获取具有确切eventId的数据
我的URL看起来像这样：

http://localhost:3000/event?eventId=b8050f0e-ef20-40252-9f7f-c883Ffab558f.webp

我尝试使用路由器从下一个/路由器
我确实尝试从next/navigation使用router，但这里的查询在router上不起作用。
我尝试了useSearchParams和usePathName

reactjs

来源：https://stackoverflow.com/questions/76510971/how-to-retrieve-id-from-url-query-params-in-next-js-13-client-component

3条答案

按热度按时间

mbyulnm01#

useSearchParams是一个客户端组件钩子，它允许您读取当前URL的查询字符串。
docs的例子：

'use client'
 
import { useSearchParams } from 'next/navigation'
 
export default function SearchBar() {
  const searchParams = useSearchParams()
 
  const search = searchParams.get('search')
 
  // URL -> `/dashboard?search=my-project`
  // `search` -> 'my-project'
  return <>Search: {search}</>
}

在你的例子中：

const eventId = searchParams.get('eventId')

赞(0）回复(0）举报 2023-06-22

uttx8gqw2#

看看你是否能够使用useRouter包获取查询参数。

import { useRouter } from 'next/router';

在该组件中，

const router = useRouter();
const {eventId} = router.query;

赞(0）回复(0）举报 2023-06-22

j8ag8udp3#

我认为这是next.js的一个错误，你可以从'next/router'导入'useRouter'，尝试从'next/navigation'导入，和'const router = useRouter（）; use 'router.push（{url}）;“的一声

赞(0）回复(0）举报 2023-06-22

我来回答

reactjs 如何在Next.js 13客户端组件中从URL(查询参数)中检索Id [已关闭]

3条答案

相关问题

热门标签

最新问答