如何阻止Remix在URL后追加?index参数？

问题原因 #

当表单未显式指定action属性时，Remix会默认将表单提交到当前路由的index action，这就导致URL自动追加?index参数。

解决方案 #

方案1：显式指定表单的action属性 #

给点赞表单明确设置action为当前页面的路由路径，提交后URL会保持原路径，不会追加?index。

示例代码：

// houses页面组件
export default function Houses() {
  const houses = useLoaderData<typeof loader>();
  return (
    <div>
      {houses.map((house) => (
        <div key={house.id}>
          <h3>{house.name}</h3>
          <form method="post" action="/houses">
            <input type="hidden" name="houseId" value={house.id} />
            <button type="submit">👍 点赞</button>
          </form>
        </div>
      ))}
    </div>
  );
}

// 对应的action处理函数
export async function action({ request }) {
  const formData = await request.formData();
  const houseId = formData.get("houseId");
  // 执行数据库点赞逻辑
  await likeHouse(houseId);
  // 重定向回原页面，确保状态更新
  return redirect("/houses");
}

方案2：使用useFetcher实现无刷新提交 #

如果不想页面刷新，推荐用Remix的useFetcher钩子，通过AJAX方式提交表单，完全不会修改URL，交互体验更流畅。

示例代码：

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

export default function Houses() {
  const houses = useLoaderData<typeof loader>();
  const fetcher = useFetcher();

  return (
    <div>
      {houses.map((house) => {
        // 判断当前是否正在提交该房屋的点赞请求
        const isLiking = fetcher.state === "loading" && fetcher.formData?.get("houseId") === house.id;
        return (
          <div key={house.id}>
            <h3>{house.name}</h3>
            <fetcher.Form method="post" action="/houses">
              <input type="hidden" name="houseId" value={house.id} />
              <button type="submit" disabled={isLiking}>
                {isLiking ? "点赞中..." : "👍 点赞"}
              </button>
            </fetcher.Form>
          </div>
        );
      })}
    </div>
  );
}

// action处理函数
export async function action({ request }) {
  const formData = await request.formData();
  const houseId = formData.get("houseId");
  await likeHouse(houseId);
  // 返回空响应，无需页面跳转
  return new Response(null, { status: 204 });
}

注意事项 #

• 方案1中，action处理完成后需用redirect返回原页面，保证页面数据同步更新。
• 方案2中，fetcher.Form不会触发页面跳转，还能通过fetcher.state处理加载状态，进一步优化用户体验。

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