什么在 Next.js next/navigation 中的react-router-dom 中替换 useLocation() ？

Question

最近，我从 React 迁移到 Next.js [电子邮件受保护]。在我的网站中，我在使用 useNavigate() 推送时使用了状态，并使用 useLocation() 从另一个页面获取值。我怎样才能在 Next.js 中做同样的事情 我正在 Next.js 中进行查询，但它在上面的链接中可见，我什至学会了如何隐藏它，但我无法再从参数接收状态。

我尝试了很多方法，这里有一个例子：与我的问题相关的链接 这里说使用 next/router，但在 next.js 版本 14.0.4 中说仅使用 next/navigation

Answer 1

请参阅 从

next.router

迁移

• 使用 App Router 时，

  useRouter

  钩子应从

  next/navigation

  导入，而不是从

  next/router

  导入

• pathname

  字符串已被删除并替换为

  usePathname()

• query

  对象已被删除并替换为

  useSearchParams()

• router.events

  已被替换。 见下文。

按照您链接到的帖子的链接 duplicate 的链接/导航部分进行操作，但如果您选择加入新版本，请按照上面的说明使用正确的

useRouter

、

usePathname

和

useSearchParams

挂钩

app

目录中的行为。

router.push("/terminal_summary?param1=foo");

const searchParams = useSearchParams();
const param1 = searchParams.get("param1"); // "foo"