使用 next/router 添加具有相同键的多个查询参数答案

【问题标题】：Add multiple query params with the same key with next/router使用 next/router 添加具有相同键的多个查询参数
【发布时间】：2022-06-25 18:05:04
【问题描述】：

我正在使用 Next.js 应用程序中的查询参数过滤来自 API 的结果。我想使用useRouter() 使用相同的键推送多个不同的过滤器，所以我的查询参数可能如下所示：

?page=1&skill=html&skill=css&skill=js

我可以将这些参数中的每一个传递给我的 API 请求。现在，当我尝试添加技能参数时，我正在使用router.push 来执行此操作，如下所示：

const router = useRouter();

const addFilter = (skill: string) => router.push({ query: { ...router.query, skill: skill.toLowerCase() } });

但显然它会覆盖之前的技能，所以我只能在 URL 中获得其中一个。如何使用相同的键添加其他查询参数，最好使用useRouter() 或next/router

【问题讨论】：

标签： reactjs next.js query-parameters

【解决方案1】：

您可以先将技能添加到数组中，而不是发送单个值。然后使用 join() 通过分隔符分隔值。例如：

query: { skills: skills.join(",") }

当然你还需要在另一边再次引爆它..

【讨论】：

【解决方案2】：

为了在 Next.js 中操作 URL 中的查询参数，我使用了一个使用 useRouter 提供的自定义钩子，但我还添加了一些 util 方法，在这种情况下，为 URL 添加过滤器我有方法添加过滤器。

这是自定义钩子的主体。

const useRouterFilter = () =>{
  const { pathname, query, push } = useRouter()

  return {
    addFilter,
    ...
  }
}

这将是钩子内的 addFilter 方法：

  /**
   * Adds a query param to the URL string to use it as a filter.
   * @param field The name of the field to filter by.
   * @param value The value of the field to filter by.
   */
  const addFilter = (field: string, value: string | boolean | number) => {
    const { [field]: filter, ...rest } = query
    if (!filter) {
      push(
        {
          pathname,
          query: { ...rest, [field]: encodeURIComponent(value) },
        },
        undefined,
        { shallow: true }
      )
    } else if (Array.isArray(filter)) {
      if (filter.indexOf(encodeURIComponent(value)) > -1) return
      push(
        {
          pathname,
          query: { ...rest, [field]: [...filter, encodeURIComponent(value)] },
        },
        undefined,
        { shallow: true }
      )
    } else {
      if (filter === encodeURIComponent(value)) return
      push(
        {
          pathname,
          query: { ...rest, [field]: [filter, encodeURIComponent(value)] },
        },
        undefined,
        { shallow: true }
      )
    }
  }

在这种情况下，我使用push 将参数添加到URL，但也可以使用replace。

【讨论】：