javascript 如何在nextJS 13中访问带连字符的查询参数？

k4ymrczo 于 2023-09-29 发布在 Java

关注(0)|答案(1)|浏览(154)

我有一个路由，其中包含一个带连字符的查询参数：
/?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

我想从页面属性中访问该参数，我该怎么做？

JavaScript

来源：https://stackoverflow.com/questions/77188648/how-to-access-query-parameter-with-hyphen-in-nextjs-13

1条答案

按热度按时间

6xfqseft1#

您可以使用useSearchParams钩子轻松访问路由的查询参数
useSearchParams是一个客户端组件钩子，它允许您读取当前URL的查询字符串。

import { useSearchParams } from 'next/navigation'

export default function Page() {

  const searchParams = useSearchParams()
  // url => http://localhost:3000/?previous-page=building-details
  const previousPage = searchParams.get('previous-page')
  console.log('previousPage', previousPage) // logs 'building-details' to the console

  return (
    <h1>Welcome</h1>
  )
}

如果Server Component是我们在这里讨论的内容，那么方法如下
注意！您应该使用应用程序文件夹。要实现这一点，在应用程序文件夹下添加一个联系人文件夹，然后在新的联系人文件夹中添加page.tsx文件，并复制粘贴下面的代码。
文件结构

const Page = ({
  searchParams,
}: {
  searchParams: { [key: string]: string | string[] | undefined }
}) => {
    const contactWay = searchParams["contact-way"]
    return (
        <>
            <h1>Contact Page</h1>
            <h2>Contact Way: {contactWay}</h2>
        </>
    )
}

export default Page

现在访问http：//localhost：3000/contact？联系方式=电子邮件
看看结果：