React 第四十九节 Router中useNavigation的具体使用详解及注意事项

前言

useNavigation 是 React Router 中一个强大的钩子，用于获取当前页面导航的状态信息。
它可以帮助开发者根据导航状态优化用户体验，如显示加载指示器、防止重复提交等。

一、useNavigation核心用途

检测导航状态：判断当前是否正在进行页面导航或数据加载

防止用户操作冲突：在导航过程中禁用表单提交按钮

优化用户体验：在页面加载期间显示加载指示器

预加载感知：感知即将发生的导航并提前准备

二、useNavigation 基本用法

import { useNavigation } from "react-router-dom";function NavigationStatus() {const navigation = useNavigation();return (<div><p>当前导航状态: {navigation.state}</p><p>目标路径: {navigation.location?.pathname || "无"}</p></div>);
}

三、useNavigation 返回值详解

useNavigation 返回一个包含以下属性的对象：

在这里插入图片描述

四、useNavigation 导航状态详解

"idle"：没有导航活动

"loading"：正在加载新页面（页面跳转中）

"submitting"：正在提交表单数据

五、useNavigation 完整代码案例

5.1、全局加载指示器

import { useNavigation } from "react-router-dom";function GlobalLoadingIndicator() {const navigation = useNavigation();// 当有导航活动时显示加载指示器const isLoading = navigation.state !== "idle";return isLoading ? (<div className="loading-overlay"><div className="spinner"></div>{navigation.state === "submitting" && (<p>提交数据中...</p>)}{navigation.state === "loading" && (<p>加载页面中...</p>)}</div>) : null;
}

5.2、表单提交状态管理

import { useNavigation } from "react-router-dom";function SubmitButton() {const navigation = useNavigation();const isSubmitting = navigation.state === "submitting";return (<button type="submit" disabled={isSubmitting}className={isSubmitting ? "submitting" : ""}>{isSubmitting ? "提交中..." : "提交表单"}</button>);
}function ContactForm() {return (<form method="post" action="/contact"><input type="text" name="name" placeholder="姓名" required /><input type="email" name="email" placeholder="邮箱" required /><textarea name="message" placeholder="留言" rows={4} required /><SubmitButton /></form>);
}

5.3、基于导航状态优化用户体验

import { useNavigation } from "react-router-dom";function ProductPage() {const navigation = useNavigation();// 当即将导航到新页面时，显示骨架屏const isNavigating = navigation.state === "loading";const targetIsProduct = navigation.location?.pathname?.startsWith("/product/");return (<div className="product-container">{isNavigating && targetIsProduct ? (<ProductSkeleton />) : (<ProductDetails />)}<RelatedProducts />{/* 在提交评论时禁用评论表单 */}<CommentForm disabled={navigation.state === "submitting"} /></div>);
}function ProductSkeleton() {return (<div className="skeleton"><div className="skeleton-image"></div><div className="skeleton-title"></div><div className="skeleton-description"></div></div>);
}

六、useNavigation 高级用法：预加载感知

import { useNavigation, Link } from "react-router-dom";function ProductList({ products }) {const navigation = useNavigation();// 获取即将导航到的产品IDconst nextProductId = navigation.location?.pathname?.split("/")[2];return (<div><h2>产品列表</h2><ul>{products.map(product => (<li key={product.id}><Link to={`/product/${product.id}`}>{product.name}{/* 高亮即将访问的产品 */}{nextProductId === product.id && " (正在加载...)"}</Link></li>))}</ul></div>);
}

七、`useNavigation` 与相似钩子的对比

钩子用途返回信息
useNavigation：用于获取当前导航状态、目标位置等
useLocation：用于获取当前URL信息，返回信息包含：当前路径、查询参数等
useNavigate：用于编程式导航，返回：导航函数
useLoaderData：用于获取路由加载器提供的数据，返回：加载的数据
useActionData：用于获取表单提交后返回的数据，返回：动作返回的数据

八、注意事项

8.1、理解状态变化：

"submitting" → "loading" → "idle" 是典型的状态变化流程

表单提交后会立即跳转到新页面

8.2、避免过度使用：

只在需要响应导航状态的组件中使用

避免在性能敏感的组件中使用

8.3、与数据加载的配合：

useNavigation 关注导航状态

useLoaderData 关注数据加载结果

两者可以配合使用优化加载体验

8.4、错误处理：

function SmartButton() {const navigation = useNavigation();const actionData = useActionData();const isSubmitting = navigation.state === "submitting";const hasError = actionData?.error;return (<button type="submit" disabled={isSubmitting || hasError}>{isSubmitting ? "处理中..." : "提交"}</button>);
}

九、最佳实践

9.1、创建导航感知组件

function NavigationAwareLink({ to, children }) {const navigation = useNavigation();const isActive = navigation.location?.pathname === to;const isNavigatingTo = navigation.state === "loading" && navigation.location?.pathname === to;return (<Link to={to} className={`nav-link ${isActive ? "active" : ""} ${isNavigatingTo ? "navigating" : ""}`}>{children}{isNavigatingTo && <span className="loading-dot"></span>}</Link>);
}

9.2、结合 `Suspense` 优化加载体验

import { useNavigation } from "react-router-dom";
import { Suspense } from "react";function Dashboard() {const navigation = useNavigation();return (<div><h1>控制面板</h1><Suspense fallback={<Spinner />}>{navigation.state === "idle" ? (<DashboardContent />) : (<DashboardSkeleton />)}</Suspense></div>);
}