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

Question

我正在使用 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？

Answer 1

为了操作 Next.js 中 URL 中的查询参数，我使用了一个自定义钩子，该钩子使用了 useRouter 提供的功能，但我还添加了一些 util 方法，在本例中，为了向 URL 添加过滤器，我有方法 addParam 。

这是自定义钩子的主体。

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

  return {
    addParam,
    ...
  }
}

这将是挂钩内的 addFilter 方法：

  /**
   * Adds a query param to the URL string. Multiple params with the same name
   * and different values can be added.
   * @param name The name of the param.
   * @param value The value of the param.
   */
  const addParam = (name: string, value: string | boolean | number) => {
    const { [name]: param, ...rest } = query
    let newQuery

    if (!param) {
      newQuery = { ...rest, [name]: encodeURIComponent(value) }
    } else if (Array.isArray(param)) {
      if (param.indexOf(encodeURIComponent(value)) > -1) return
      newQuery = { ...rest, [name]: [...param, encodeURIComponent(value)] }
    } else {
      if (param === encodeURIComponent(value)) return
      newQuery = { ...rest, [name]: [param, encodeURIComponent(value)] }
    }

    push(
      {
        pathname,
        query: newQuery,
      },
      undefined,
      { shallow: true }
    )
  }

在本例中，我使用 push 将参数添加到 URL，但也可以使用 replace。

完整的钩子可以从以下要点复制

Answer 2

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

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

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

Answer 3

您可以修改 addFilter 函数，将所需的 skill 值作为数组添加到 skill 查询参数中。确保对数组项进行重复删除，以避免 URL 中出现重复的过滤器。

const convertQueryParamToArray = (queryParam: string) => !queryParam ? [] : [queryParam];

const addFilter = async (skill: string) => {
    // Force `skill` query param into an array
    const currentSkillArray = Array.isArray(router.query.skill)
        ? router.query.skill
        : convertQueryParamToArray(router.query.skill);
    // Deduplicate skills with same value
    const newSkillArray = [...new Set([...currentSkill, skill.toLowerCase()])];
    router.push({
        query: { ...router.query, skill: newSkillArray }
    });
};

给定上述函数并假设您的 URL 以 /?page=1 开头，调用 addFilter('html') 将使 URL 变为 /?page=1& ;技能=html。以下对 addFilter('css') 的调用会将 URL 更新为 /?page=1&skill=html&skill=css。等等。