Remix Run中点击Link/NavLink时如何实现即时URL切换与加载动画

核心思路 #

Remix的客户端导航默认会立即更新URL，但如果页面依赖的loader请求耗时较长，会导致页面渲染延迟。我们可以通过useNavigation钩子监听导航状态，在加载过程中显示动画，同时利用Remix的导航机制确保URL即时变更。

步骤1：用useNavigation监听导航状态 #

在根布局或需要显示加载动画的组件中，导入并使用useNavigation来获取当前导航状态：

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

export function RootLayout() {
  const navigation = useNavigation();
  const isLoading = navigation.state === "loading";

  return (
    <html>
      <body>
        {/* 全局加载动画，可自定义样式 */}
        {isLoading && <div className="global-loader">加载中...</div>}
        <Outlet />
      </body>
    </html>
  );
}

navigation.state包含三种状态：

• idle：当前无导航操作
• loading：正在加载loader数据
• submitting：正在提交表单

步骤2：优化嵌套组件的loader加载 #

如果嵌套组件的loader是串行执行（父loader完成后才加载子loader），可以通过并行加载提升速度：

• 在父路由的loader中，用Promise.all并行发起多个数据请求，再传递给子组件；
• Remix会自动合并同域名的fetch请求，尽量在loader中使用原生fetch而非第三方请求库。

步骤3：给单个Link/NavLink添加加载状态 #

如果需要针对特定导航链接显示专属加载动画，可以结合navigation.location判断当前是否正在导航到目标路径：

import { NavLink, useNavigation } from "@remix-run/react";

export function NavBar() {
  const navigation = useNavigation();

  return (
    <nav>
      <NavLink
        to="/dashboard"
        className={({ isActive }) =>
          `${isActive ? "active-link" : ""} ${
            navigation.location?.pathname === "/dashboard" && navigation.state === "loading"
              ? "link-loading"
              : ""
          }`
        }
      >
        控制台
        {navigation.location?.pathname === "/dashboard" && navigation.state === "loading" && (
          <span className="link-spinner"></span>
        )}
      </NavLink>
    </nav>
  );
}

步骤4：确保客户端导航生效 #

确认你的Link/NavLink没有添加reloadDocument属性，否则会触发全页面刷新，无法实现即时URL变更和客户端加载动画：

// 正确用法（客户端导航）
<Link to="/about">关于我们</Link>

// 错误用法（全页面刷新）
<Link to="/about" reloadDocument>关于我们</Link>

额外优化：使用View Transitions（可选） #

如果项目使用Remix v1.15+，可以启用View Transitions API，实现更流畅的页面切换动画，同时自动关联加载状态：

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

export function AnimatedLink({ to, children }) {
  const navigation = useNavigation();
  const isLoading = navigation.state === "loading" && navigation.location?.pathname === to;

  return (
    <Link
      to={to}
      unstable_viewTransition
      className={isLoading ? "loading" : ""}
    >
      {children}
    </Link>
  );
}

配置完成后，点击Link时URL会立即更新，同时根据导航状态显示加载动画，直到loader数据加载完成并渲染新页面。

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