Remix页面渲染完成后，如何通过Loader获取选中资源的额外数据？

方案1：正确使用URL查询参数传递数组 #

你之前尝试URL传参失败大概率是格式问题，Remix的Loader可以通过request.url解析两种常见的数组格式：

前端传递方式 #

import { useNavigate } from "@remix-run/react";

function ResourceSelector() {
  const navigate = useNavigate();
  const selectedIds = [1, 3, 5]; // 用户选中的ID数组

  const handleLoad = () => {
    // 方式A：重复键格式（推荐，符合HTTP查询参数规范）
    const searchParams = new URLSearchParams();
    selectedIds.forEach(id => searchParams.append("ids", id));
    navigate(`?${searchParams.toString()}`);

    // 方式B：逗号分隔格式（适合短数组）
    // navigate(`?ids=${selectedIds.join(",")}`);
  };

  return <button onClick={handleLoad}>加载选中资源</button>;
}

Loader解析方式 #

export async function loader({ request }) {
  const url = new URL(request.url);
  
  // 对应方式A的解析
  const ids = url.searchParams.getAll("ids").map(Number);
  
  // 对应方式B的解析
  // const idsStr = url.searchParams.get("ids");
  // const ids = idsStr ? idsStr.split(",").map(Number) : [];

  // 调用接口获取资源
  const resources = await fetchResourcesByIds(ids);
  return json({ resources });
}

方案2：用表单POST提交（适合长数组） #

如果ID数组长度较大，URL查询参数可能受浏览器长度限制，用表单POST提交更稳妥：

前端表单 #

import { Form } from "@remix-run/react";

function ResourceSelector() {
  const selectedIds = [1, 3, 5];

  return (
    <Form method="post">
      {/* 把选中的ID作为隐藏字段提交 */}
      {selectedIds.map(id => (
        <input type="hidden" name="ids" value={id} key={id} />
      ))}
      <button type="submit">加载选中资源</button>
    </Form>
  );
}

Action处理并重定向触发Loader #

export async function action({ request }) {
  const formData = await request.formData();
  const ids = formData.getAll("ids").map(Number);
  
  // 重定向到带查询参数的页面，触发Loader重新获取数据
  return redirect(`?ids=${ids.join(",")}`);
}

// Loader部分同方案1的解析逻辑

关键说明 #

• Remix的Loader仅在页面导航、表单提交（导致页面跳转/重载）时会重新执行，客户端状态（如formState）不会触发Loader的服务器端请求，这是你之前用formState无效的原因。
• 无论用哪种方式，核心是触发一次导航或表单提交，让Loader能接收到新的参数并重新运行。

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