使用useSearchParams()在nextjs中获取动态数据

Question

有人曾经在 nextjs 中从页面路由器迁移到应用程序路由器吗？

我有动态数据的迁移问题，在页面路由器上，它使用 useRouter().query 检索页面上的动态数据，而在应用程序路由器中，应用程序它被替换为 useSearchParams()

如何让迁移成功，并且按照useRouter().query中的流程？

源代码：

import { useState } from 'react'
import { useRouter } from 'next/router'
import Link from 'next/link'
import dbConnect from '../../lib/dbConnect'
import Pet from '../../models/Pet'
/* Allows you to view pet card info and delete pet card*/
const PetPage = ({ pet }) => {
  const router = useRouter()
  const [message, setMessage] = useState('')
  const handleDelete = async () => {
    const petID = router.query.id
    try {
      await fetch(`/api/pets/${petID}`, {
        method: 'Delete',
      })
      router.push('/')
    } catch (error) {
      setMessage('Failed to delete the pet.')
    }
  }
  return (
    <div key={pet._id}>
      <div className="card" style={{ width: '1000px' }}>
        <img src={pet.image_url} />
        <h5 className="pet-name">{pet.name}</h5>
        <div className="main-content">
          <p className="pet-name">{pet.name}</p>
          <p className="owner">Owner: {pet.owner_name}</p>
          {/* Extra Pet Info: Likes and Dislikes */}
          <div className="likes info">
            <p className="label">Likes</p>
            <ul>
              {pet.likes.map((data, index) => (
                <li key={index}>{data} </li>
              ))}
            </ul>
          </div>
          <div className="dislikes info">
            <p className="label">Dislikes</p>
            <ul>
              {pet.dislikes.map((data, index) => (
                <li key={index}>{data} </li>
              ))}
            </ul>
          </div>
          <div className="btn-container">
            <Link href="/[id]/edit" as={`/${pet._id}/edit`} legacyBehavior>
              <button className="btn edit">Edit</button>
            </Link>
            <button className="btn delete" onClick={handleDelete}>
              Delete
            </button>
          </div>
        </div>
      </div>
      {message && <p>{message}</p>}
    </div>
  )
}
export async function getServerSideProps({ params }) {
  await dbConnect()
  const pet = await Pet.findById(params.id).lean()
  pet._id = pet._id.toString()
  return { props: { pet } }
}
export default PetPage

动态数据页面链接：

{`/pet/${item._id}

Answer 1

/pet/${id}

不是查询参数。这是一个 URL 段。

useSearchParams

返回类似

/pet?id=123

的查询。但对于

/pet/123

，您需要构建文件系统以创建动态路由

app/pet/[id]/page.tsx

在此页面中，默认导出将收到一个包含

params

属性的

id

对象：

export default PetPage({ params }) {
  const id = params.id;

  // ...
  await dbConnect()
  const pet = await Pet.findById(params.id).lean()
  pet._id = pet._id.toString()

  return (
    <div>{pet.name}</div>
  )
}