如何在 NextJS 上插入查询字符串

Question

我正在使用next/link 指向特定页面。链接组件如下所示：

<Link
    href={{
      pathname: `/users/[slug]?lang=${lang}`,
      query: { slug, lang },
    }}
>
 Click me
</Link>

lang 是用户选择的语言 (i18)。

问题

每次我到达有问题的页面，刷新后我都会收到这个错误：

Error: The provided "href" (/users/[slug]?lang=en) value is missing query values (slug) to be interpolated properly. Read more: https://err.sh/vercel/next.js/href-interpolation-failed

但我的 URL 看起来像这样 http://localhost:3000/users/Y0901083155?lang=en 其中 slug 是 Y0901083155 而 lang 是 en

页面架构

├──_app.js
├──index.js
├──user/ --------------> folder
   ├──[slug]/ --------> folder
      ├── edit/    ----> folder
      ├── create/  ----> folder
      ├── index.tsx

Answer 1

您应该在路径名中包含slug，并在查询对象中传递lang。

// Assuming slug='some-slug', and lang='en'

<Link
    href={{
        pathname: `/users/${slug}`, // Will match `/users/some-slug` path
        query: { lang } // Will pass `?lang=en` as query param
    }}
>
    Click me
</Link>