跳到主要内容

Next.js 导航钩子

介绍​

在 Next.js 中，导航钩子（Navigation Hooks）是一组用于监听路由变化并执行自定义逻辑的工具。它们允许你在用户导航到新页面之前、之后或在导航过程中执行特定的操作。这对于处理页面加载状态、数据预取、权限验证等场景非常有用。

Next.js 提供了两个主要的导航钩子：useRouter 和 Router.events。接下来，我们将逐步介绍这些钩子的使用方法，并通过实际案例展示它们的应用场景。

使用 useRouter 钩子​

useRouter 是 Next.js 提供的一个 React 钩子，用于访问路由对象。通过它，你可以获取当前路由信息、执行路由跳转以及监听路由变化。

基本用法​

首先，你需要在组件中导入并使用 useRouter 钩子：

jsx
import { useRouter } from 'next/router';

function MyComponent() {
  const router = useRouter();

  const handleClick = () => {
    router.push('/about');
  };

  return (
    <div>
      <p>当前路径: {router.pathname}</p>
      <button onClick={handleClick}>跳转到关于页面</button>
    </div>
  );
}

在这个例子中，我们使用 router.push 方法将用户导航到 /about 页面。router.pathname 则用于获取当前页面的路径。

监听路由变化​

useRouter 还可以用于监听路由变化。例如，你可以在路由变化时显示一个加载指示器：

jsx
import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';

function MyComponent() {
  const router = useRouter();
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const handleStart = (url) => {
      if (url !== router.pathname) {
        setLoading(true);
      }
    };
    const handleComplete = () => setLoading(false);

    router.events.on('routeChangeStart', handleStart);
    router.events.on('routeChangeComplete', handleComplete);

    return () => {
      router.events.off('routeChangeStart', handleStart);
      router.events.off('routeChangeComplete', handleComplete);
    };
  }, [router]);

  return (
    <div>
      {loading && <p>加载中...</p>}
      <p>当前路径: {router.pathname}</p>
    </div>
  );
}

在这个例子中，我们使用 router.events 来监听 routeChangeStart 和 routeChangeComplete 事件。当路由开始变化时，我们显示一个加载指示器；当路由变化完成时，隐藏加载指示器。

使用 Router.events​

除了 useRouter，你还可以直接使用 Router.events 来监听路由变化。这对于在非组件环境中（例如在 _app.js 中）处理路由变化非常有用。

全局路由监听​

你可以在 _app.js 中设置全局的路由监听器：

jsx
import { useEffect } from 'react';
import { useRouter } from 'next/router';

function MyApp({ Component, pageProps }) {
  const router = useRouter();

  useEffect(() => {
    const handleRouteChange = (url) => {
      console.log('路由变化到:', url);
    };

    router.events.on('routeChangeStart', handleRouteChange);

    return () => {
      router.events.off('routeChangeStart', handleRouteChange);
    };
  }, [router]);

  return <Component {...pageProps} />;
}

export default MyApp;

在这个例子中，我们在 _app.js 中监听 routeChangeStart 事件，并在控制台中记录路由变化。

实际应用场景​

页面加载指示器​

在用户导航到新页面时，显示一个加载指示器是常见的需求。通过 useRouter 和 Router.events，你可以轻松实现这一功能。

jsx
import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';

function PageWithLoader() {
  const router = useRouter();
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const handleStart = () => setLoading(true);
    const handleComplete = () => setLoading(false);

    router.events.on('routeChangeStart', handleStart);
    router.events.on('routeChangeComplete', handleComplete);

    return () => {
      router.events.off('routeChangeStart', handleStart);
      router.events.off('routeChangeComplete', handleComplete);
    };
  }, [router]);

  return (
    <div>
      {loading && <p>加载中...</p>}
      <p>当前路径: {router.pathname}</p>
    </div>
  );
}

权限验证​

在用户访问某些受保护的页面时，你可能需要验证用户的权限。通过 useRouter，你可以在路由变化时执行权限验证：

jsx
import { useEffect } from 'react';
import { useRouter } from 'next/router';

function ProtectedPage() {
  const router = useRouter();

  useEffect(() => {
    const isAuthenticated = checkAuth(); // 假设这是一个检查用户权限的函数

    if (!isAuthenticated) {
      router.push('/login');
    }
  }, [router]);

  return <p>这是受保护的页面</p>;
}

总结​

Next.js 的导航钩子提供了强大的工具来监听和处理路由变化。通过 useRouter 和 Router.events，你可以在用户导航时执行自定义逻辑，例如显示加载指示器、验证权限等。

提示

在实际开发中，合理使用导航钩子可以显著提升用户体验。例如，在路由变化时显示加载指示器可以减少用户等待的焦虑感。

附加资源​

练习​

  1. 尝试在你的 Next.js 项目中实现一个页面加载指示器。
  2. 使用 useRouter 钩子创建一个按钮，点击后跳转到另一个页面。
  3. 在 _app.js 中设置一个全局的路由监听器，记录所有路由变化。

通过以上练习，你将更好地掌握 Next.js 导航钩子的使用方法。