reactjs - 如何在 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

标签： reactjsnext.jsreact-i18next

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>