修改URL搜索参数触发Root Loader，如何阻止Remix重复请求？

这是预期行为吗？ #

这确实是Remix的默认行为。root路由会匹配所有URL路径，当URL的search参数发生变化时，Remix默认会重新验证所有匹配当前URL的loader——包括root loader。而像你例子里从/shop/category1导航到/shop/category2时，只是路径段发生变化，Remix会通过客户端路由优化，仅重新加载变化的子路由loader，不会触发root loader的重新请求。

如何阻止重新请求root loader？ #

你可以通过以下几种方式控制root loader的重新验证：

1. 使用shouldRevalidate钩子 #

在root.tsx中定义shouldRevalidate函数，判断当仅修改不影响root共享数据的search参数（比如page）时，返回false，阻止root loader重新请求。示例代码：

// root.tsx
export function shouldRevalidate({ currentUrl, nextUrl }) {
  // 仅当路径名不变，且仅page参数变化（其他参数无变动）时，不重新验证root loader
  if (currentUrl.pathname === nextUrl.pathname) {
    const currentPage = currentUrl.searchParams.get("page");
    const nextPage = nextUrl.searchParams.get("page");
    
    // 判断是否只有page参数发生变化
    const hasOnlyPageChanged = 
      (currentPage === null && nextPage !== null) || 
      (currentPage !== null && nextPage !== null && currentPage !== nextPage);
    
    // 检查除page外的其他参数是否完全一致
    const otherParamsMatch = Array.from(currentUrl.searchParams.entries()).every(
      ([key, value]) => key !== "page" && nextUrl.searchParams.get(key) === value
    );

    if (hasOnlyPageChanged && otherParamsMatch) {
      return false;
    }
  }
  // 其他情况正常触发重新验证
  return true;
}

2. 调整共享数据的加载层级 #

如果root的共享数据不需要在所有路由中加载，或者某些子路由的search参数变化和它无关，可以把共享数据的加载逻辑移到更下层的子路由loader中，这样root loader就不会被这些子路由的search参数变化触发。

3. 客户端缓存root数据 #

你也可以在客户端通过useMatches获取root loader的数据并手动缓存，但更推荐使用shouldRevalidate——这是Remix官方提供的控制loader重新验证的标准方式。

示例链接代码 #

<Link to={"/shop/category1"}>Category 1</Link>
<Link to={"/shop/category2"}>Category 2</Link> {/* 从category1导航至此不会重新请求root loader */}
<Link to={"/shop/category2?page=2"}>Category 2, page 2</Link> {/* 配置shouldRevalidate后，导航至此不会重新请求root loader */}

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