如何在 NextJS 中使用 Link 导航时将唯一 ID 发送到下一页

Question

当用户导航时，我正在尝试将id 发送到下一页。

我有一个主页，我正在获取一个数据数组并使用.map 在一种基于卡片的 UI 中显示它。

现在，当用户单击卡片时，他们将被导航到显示有关该卡片的详细信息的下一页。

假设主页在这里 - localhost:3000

用户点击ID为234的卡片

他们将被导航到下一页：

下一页是 - localhost:3000/user/234

现在在这里我想显示关于那张 id 为 234 的卡的信息。为此，我确实需要发出 fetch 请求，例如 fetch(https://userdatabase/234)

上面的234 肯定是动态id，我怎么能让这个fetch 请求知道每次点击新卡时都要改变这个id？或者换句话说，这个页面如何“知道”卡片的 id ？

现在，我使用一种解决方法：

1. 当用户在第二页时，URL会像这样localhost:3000/user/386
2. 在 NextJS 中使用 useRouter 获取此 id：

   import {useRouter} from 'next/router'
   `const router = useRouter()`
   
   
   
   fetch(`localhost:3000/user/${router?.query?.user})
    
   

   我了解从 URL 获取 id 并进行新的任务根本不理想，这会导致第二页上出现过时的缓存问题。

   我该如何以更好的方式解决这个问题？

   非常感谢您的阅读。

Answer 1

你需要做一个动态路线：Next.js Docs

为您的情况制作一个文件pages/user/[id].js

使用这个 sn-p 访问 id：

import { useRouter } from 'next/router'

const Component = () => {
  const router = useRouter()
  const { id } = router.query

  return <p>{id}</p>
}

export default Component