Remix Loader Function未每次执行，Tab样式需二次点击生效求助

问题根源：Remix客户端导航到子路由时，默认不会重新执行父路由的Loader，导致currentTab保留旧值，第一次点击Tab时激活类无法及时生效，第二次点击才触发Loader更新数据。

方案1：客户端实时获取激活Tab（推荐） #

使用useMatches钩子直接在客户端获取当前路由匹配信息，无需依赖服务器Loader，实时更新激活状态：

import { useMatches, Link, Outlet } from "@remix-run/react";

export default function SettingsPage() {
  const matches = useMatches();
  // 提取最后一段路由作为当前Tab
  const currentTab = matches.at(-1)?.pathname.split("/").pop() || "tab1";

  const tabClassName = (tab: string) => currentTab === tab ? "is-active" : "";

  return (
    <>
      <div className="tabs is-centered m-5 pr-5 pl-5">
        <ul>
          <li className={tabClassName("tab1")}><Link to="tab1">one</Link></li>
          <li className={tabClassName("tab2")}><Link to="tab2">two</Link></li>
          <li className={tabClassName("tab3")}><Link to="tab3">three</Link></li>
        </ul>
      </div>
      <Outlet />
    </>
  );
}

方案2：强制父路由Loader重新执行 #

若必须依赖服务器返回的currentTab，在父路由模块中添加shouldRevalidate函数，强制每次导航都重新调用Loader：

// 父路由文件（如 routes/settings.tsx）
import { json, redirect } from "@remix-run/node";
import { useLoaderData, Link, Outlet } from "@remix-run/react";

// 每次导航都重新验证父路由
export function shouldRevalidate() {
  return true;
}

export async function loader({ request }) {
  const parts = new URL(request.url).pathname.split("/");
  const tab = parts.pop() || parts.pop() || "";
  if (tab === "settings") {
    return redirect("/settings/tab1");
  }
  return json({ currentTab: tab });
}

export default function SettingsPage() {
  const { currentTab } = useLoaderData();
  
  const tabClassName = (tab: string) => currentTab === tab ? "is-active" : "";

  return (
    <>
      <div className="tabs is-centered m-5 pr-5 pl-5">
        <ul>
          <li className={tabClassName("tab1")}><Link to="tab1">one</Link></li>
          <li className={tabClassName("tab2")}><Link to="tab2">two</Link></li>
          <li className={tabClassName("tab3")}><Link to="tab3">three</Link></li>
        </ul>
      </div>
      <Outlet />
    </>
  );
}

方案3：手动导航并强制重新验证 #

保留Tab的交互逻辑，通过useNavigate手动处理导航并指定重新验证：

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

export default function SettingsPage() {
  const { currentTab } = useLoaderData();
  const navigate = useNavigate();

  const handleTabClick = (tab: string) => {
    navigate(`/settings/${tab}`, { revalidate: true });
  };

  const tabClassName = (tab: string) => currentTab === tab ? "is-active" : "";

  return (
    <>
      <div className="tabs is-centered m-5 pr-5 pl-5">
        <ul>
          <li className={tabClassName("tab1")} onClick={() => handleTabClick("tab1")}>
            <span>one</span>
          </li>
          <li className={tabClassName("tab2")} onClick={() => handleTabClick("tab2")}>
            <span>two</span>
          </li>
          <li className={tabClassName("tab3")} onClick={() => handleTabClick("tab3")}>
            <span>three</span>
          </li>
        </ul>
      </div>
      <Outlet />
    </>
  );
}

总结 #

优先使用方案1，客户端直接处理激活状态，无额外服务器请求，响应更快且彻底解决延迟问题。若业务逻辑必须依赖服务器返回的数据，再选择方案2或3。

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