如何简化搜索查询参数？答案

【问题标题】：How to simplify the search query parameter?如何简化搜索查询参数？
【发布时间】：2021-04-27 20:49:18
【问题描述】：

问题

我有一个带有indexName: 'movies' 的电影数据库。

假设我的查询是John，那么域是domain.tld/?movies[query]=John。

我想将搜索查询参数简化为domain.tld/?keywords=John。我该怎么做？

我已经知道的

阅读docs后，我知道我必须以某种方式修改createURL和parseURL：

  createURL({ qsModule, location, routeState }) {
    const { origin, pathname, hash } = location;
    const indexState = routeState['movies'] || {};
    const queryString = qsModule.stringify(routeState);

    if (!indexState.query) {
      return `${origin}${pathname}${hash}`;
    }

    return `${origin}${pathname}?${queryString}${hash}`;
  },

...

  parseURL({ qsModule, location }) {
    return qsModule.parse(location.search.slice(1));
  },

【问题讨论】：

标签： algolia instantsearch.js

【解决方案1】：

经过一些尝试和错误，这里是一个解决方案：

  createURL({ qsModule, location, routeState }) {
    const { origin, pathname, hash } = location;
    const indexState = routeState['movies'] || {}; // routeState[indexName]
    //const queryString = qsModule.stringify(routeState); // default -> movies[query]
    const queryString = 'keywords=' + encodeURIComponent(indexState.query); // NEW

    if (!indexState.query) {
      return `${origin}${pathname}${hash}`;
    }

    return `${origin}${pathname}?${queryString}${hash}`;
  },

...

  parseURL({ qsModule, location }) {
    //return qsModule.parse(location.search.slice(1)); // default: e.g. movies%5Bquery%5D=john
    const query = location.search.match(/=(.*)/g) || []; // NEW
    const queryString = 'movies%5Bquery%5D' + query[0]; // NEW
    return qsModule.parse(queryString); // NEW
  },

【讨论】：