如何使用 router.push 从“next/navigation”传递数据

Question

我们如何使用

next/navigation

的 useRouter() 的 router.push api 以编程方式将数据从一个路由传递到另一个路由？

另外我们如何在

next/navigation

的router.push api中执行url屏蔽，这在

next/router

的router.push中是可能的？

Answer 1

这实际上是两个问题。

1. 使用查询参数传递数据。

'use client'
 
import { useRouter } from 'next/navigation'
 
export default function Page() {
  const router = useRouter()
 
  return (
    <button type="button" onClick={() => router.push('/dashboard?prop=value')}>
      Dashboard
    </button>
  )
}

2. 不建议屏蔽网址

asPath 已被删除，因为 as 的概念已从新路由器中删除。不建议使用

as

。