如何使用Instantsearch生成SEO友好URL 带筛选参数URL不生效如何解决

修复方案 #

问题由三处配置不匹配导致，按以下步骤修正即可：

1. 修正路径匹配正则
   你示例URL的路径结构为/buy-list/buying/分类名，但parseURL方法中的正则写反了路径顺序，完全匹配不到分类参数，导致解析出的category永远为空。
   将parseURL中的正则：

const pathnameMatches = location.pathname.match(/\/buying\/buy-list\/(.*?)\/?$/);

修改为：

const pathnameMatches = location.pathname.match(/\/buy-list\/buying\/(.*?)\/?$/);

2. 修正路由状态映射的索引名
   routeToState返回的对象中你写死了索引key为instant_search，但初始化InstantSearch时用的indexName是INSTANT_SEARCH_INDEX_NAME变量，只要该变量值不等于instant_search，解析出的筛选状态就找不到对应索引，不会生效。

3. 修正筛选字段名不匹配问题
   stateToRoute中取筛选值用的字段是package、year，但routeToState中设置时用的是packages、years，字段名不一致导致筛选条件无法同步。

修正后的完整stateMapping配置如下：

stateMapping: {
    stateToRoute(uiState) {
        const indexUiState = uiState[INSTANT_SEARCH_INDEX_NAME] || {};
        return {
            query: indexUiState.query,
            page: indexUiState.page,
            types: indexUiState.refinementList?.package,
            years: indexUiState.refinementList?.year,
            series: indexUiState.refinementList?.series,
            category: indexUiState.hierarchicalMenu?.[INSTANT_SEARCH_HIERARCHICAL_ATTRIBUTE]?.join('>')
        };
    },
    routeToState(routeState) {
        return {
            [INSTANT_SEARCH_INDEX_NAME]: {
                query: routeState.query,
                page: routeState.page,
                hierarchicalMenu: {
                    [INSTANT_SEARCH_HIERARCHICAL_ATTRIBUTE]: routeState.category?.split('>')
                },
                refinementList: {
                    package: routeState.types,
                    year: routeState.years,
                    series: routeState.series
                }
            }
        };
    }
}

修改完成后访问带参数的URL即可自动触发对应的筛选逻辑。

内容的提问来源于stack exchange，提问作者Keith Petrillo