我有一个路由,其中包含一个带连字符的查询参数:/?previous-page=building-details
在我的页面:
import EnergyEfficiency from "@/ui/energy-check/energy-efficiency"
const Page = ({
params,
searchParams,
}: {
params: { id: string }
searchParams: { modernization: string; previousPage: string }
}) => {
const { modernization, previousPage } = searchParams
console.log(previousPage) // undefined
return <EnergyEfficiency addressID={params.id} />
}
export default Page
我想从页面属性中访问该参数,我该怎么做?
1条答案
按热度按时间6xfqseft1#
您可以使用useSearchParams钩子轻松访问路由的查询参数
useSearchParams是一个客户端组件钩子,它允许您读取当前URL的查询字符串。
如果Server Component是我们在这里讨论的内容,那么方法如下
注意!您应该使用应用程序文件夹。要实现这一点,在应用程序文件夹下添加一个联系人文件夹,然后在新的联系人文件夹中添加page.tsx文件,并复制粘贴下面的代码。
文件结构
现在访问http://localhost:3000/contact?联系方式=电子邮件
看看结果:
CodeSandbox:https://codesandbox.io/p/sandbox/upbeat-leaf-6scwsm?file=%2Fapp%2Fcontact%2Fpage.tsx%3A3%2C5