Remix.run中如何为'/'根路由追加动态查询字符串参数

Remix 原生兼容标准 Web API 的URLSearchParams，不需要引入额外依赖，按以下方式实现即可得到/?page=3格式的路由，同时不会丢失路径上已有的其他查询参数。 #

基础依赖导入 #

首先从Remix官方包导入需要的工具方法：

import { json, type LoaderFunctionArgs } from "@remix-run/node";
import { Link, useSearchParams, useNavigate } from "@remix-run/react";

步骤1：在Loader中读取页码参数 #

直接从请求对象里解析查询参数，处理默认值后传给组件，不需要额外配置路由：

export async function loader({ request }: LoaderFunctionArgs) {
  const url = new URL(request.url);
  // 读取page参数，不存在时默认展示第1页
  const pageNum = Number(url.searchParams.get("page") ?? 1);
  // 替换为你自己的分页查询逻辑
  const pageData = await queryListByPage(pageNum);
  return json({ pageNum, pageData });
}

步骤2：组件内生成带查询参数的跳转链接 #

场景1：普通分页按钮点击跳转（推荐用Link组件） #

基于当前已有的查询参数修改page字段，避免覆盖筛选、排序等其他已存在的url参数：

export default function IndexRoute({
  pageNum,
  pageData,
}: {
  pageNum: number;
  pageData: any[];
}) {
  const [searchParams] = useSearchParams();

  // 生成目标页码的跳转地址
  const genPageUrl = (targetPage: number) => {
    // 先复制当前所有已存在的查询参数
    const params = new URLSearchParams(searchParams);
    params.set("page", String(targetPage));
    return `/?${params.toString()}`;
  };

  return (
    <div>
      {/* 渲染分页列表内容 */}
      <div className="pagination">
        <Link to={genPageUrl(pageNum - 1)} prefetch="intent">上一页</Link>
        {/* 跳转到第3页的按钮，点击后地址栏就会变成 /?page=3 */}
        <Link to={genPageUrl(3)} prefetch="intent">3</Link>
        <Link to={genPageUrl(pageNum + 1)} prefetch="intent">下一页</Link>
      </div>
    </div>
  );
}

场景2：逻辑触发跳转（非点击链接场景） #

如果是输入页码跳转、切换页大小自动跳转这类需要通过代码控制路由的场景，用useNavigate实现：

// 组件内逻辑
const navigate = useNavigate();
const [searchParams] = useSearchParams();

const goToPage = (targetPage: number) => {
  const params = new URLSearchParams(searchParams);
  params.set("page", String(targetPage));
  navigate(`/?${params.toString()}`);
};

// 业务逻辑中调用 goToPage(3) 即可跳转到 /?page=3

避坑提示：不要用硬拼接字符串的方式写to={/?page=${targetPage}}，这种写法会清空url上原有的其他查询参数，比如原有/?sort=createTime会被直接替换成/?page=3，丢失排序状态，基于现有searchParams复制修改的写法更稳妥。

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