React 第五十节 Router 中useNavigationType的使用详细介绍

news2025/6/3 11:27:10

前言

useNavigationType 是 React Router v6 提供的一个钩子，用于确定用户如何导航到当前页面。
它提供了关于导航类型的洞察，有助于优化用户体验和实现特定导航行为。

一、useNavigationType 核心用途

1.1、检测导航方式：

判断用户是通过浏览器动作（前进/后退）还是程序化导航到达当前页面

1.2、优化页面行为：

根据导航类型调整页面效果（如过渡动画）

1.3、用户行为分析：

跟踪用户如何与你的应用交互

1.4、恢复滚动位置：

只在需要时恢复滚动位置

二、useNavigationType导航类型值

POP：通过浏览器的前进/后退按钮或历史记录跳转

PUSH：通过程序化导航（如 navigate()）添加新条目到历史堆栈

REPLACE：通过程序化导航替换当前历史条目

三、useNavigationType使用说明

3.1、基本用法

import { useNavigationType } from 'react-router-dom';

function MyComponent() {
  const navType = useNavigationType();
  
  return (
    <div>
      <p>导航类型: {navType}</p>
    </div>
  );
}

3.2、完整示例：根据导航类型应用不同动画

import React, { useEffect, useState } from 'react';
import { 
  useNavigationType,
  useLocation,
  Routes,
  Route,
  Link,
  useNavigate
} from 'react-router-dom';

// 主应用组件
export default function App() {
  return (
    <div className="app">
      <header>
        <h1>useNavigationType 示例</h1>
        <nav>
          <Link to="/" className="nav-link">首页</Link>
          <Link to="/about" className="nav-link">关于</Link>
          <Link to="/contact" className="nav-link">联系我们</Link>
        </nav>
      </header>
      
      <main>
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/about" element={<AboutPage />} />
          <Route path="/contact" element={<ContactPage />} />
        </Routes>
      </main>
      
      <footer>
        <p>尝试使用浏览器前进/后退按钮查看不同效果</p>
      </footer>
    </div>
  );
}

// 页面组件 - 带导航类型检测
function PageTemplate({ title, children }) {
  const navType = useNavigationType();
  const [animation, setAnimation] = useState('');
  
  useEffect(() => {
    // 根据导航类型应用不同动画
    switch(navType) {
      case 'POP':
        setAnimation('slide-in-left');
        break;
      case 'PUSH':
        setAnimation('slide-in-right');
        break;
      case 'REPLACE':
        setAnimation('fade-in');
        break;
      default:
        setAnimation('fade-in');
    }
    
    // 动画结束后重置状态
    const timer = setTimeout(() => setAnimation(''), 500);
    return () => clearTimeout(timer);
  }, [navType]);
  
  return (
    <div className={`page ${animation}`}>
      <div className="navigation-indicator">
        <span className={`indicator ${navType === 'POP' ? 'active' : ''}`}>
          浏览器导航
        </span>
        <span className={`indicator ${navType === 'PUSH' ? 'active' : ''}`}>
          应用内导航
        </span>
        <span className={`indicator ${navType === 'REPLACE' ? 'active' : ''}`}>
          替换导航
        </span>
      </div>
      
      <h2>{title}</h2>
      <div className="page-content">
        {children}
      </div>
    </div>
  );
}

// 具体页面组件
function HomePage() {
  const navigate = useNavigate();
  
  return (
    <PageTemplate title="首页">
      <p>欢迎访问我们的网站！</p>
      <div className="button-group">
        <button 
          onClick={() => navigate('/about')}
          className="btn push-btn"
        >
          普通导航 (PUSH)
        </button>
        
        <button 
          onClick={() => navigate('/contact', { replace: true })}
          className="btn replace-btn"
        >
          替换导航 (REPLACE)
        </button>
      </div>
    </PageTemplate>
  );
}

function AboutPage() {
  return (
    <PageTemplate title="关于我们">
      <p>我们是一家专注于前端技术的公司。</p>
      <p>使用 useNavigationType 可以增强用户体验！</p>
      <ul className="feature-list">
        <li>检测导航来源</li>
        <li>应用不同过渡效果</li>
        <li>优化滚动行为</li>
        <li>增强用户分析</li>
      </ul>
    </PageTemplate>
  );
}

function ContactPage() {
  return (
    <PageTemplate title="联系我们">
      <div className="contact-card">
        <p>邮箱: contact@example.com</p>
        <p>电话: (123) 456-7890</p>
        <p>地址: 前端开发者大街 123 号</p>
      </div>
    </PageTemplate>
  );
}

四、useNavigationType实际应用场景

4.1、滚动位置恢复

function ProductList() {
  const navType = useNavigationType();
  const listRef = useRef(null);

  // 保存滚动位置
  useEffect(() => {
    const list = listRef.current;
    return () => {
      sessionStorage.setItem('productListScroll', list.scrollTop);
    };
  }, []);

  // 恢复滚动位置 - 仅对浏览器导航生效
  useEffect(() => {
    if (navType === 'POP') {
      const savedScroll = sessionStorage.getItem('productListScroll');
      if (savedScroll) {
        listRef.current.scrollTop = parseInt(savedScroll, 10);
      }
    }
  }, [navType]);

  return (
    <div ref={listRef} className="product-list">
      {/* 产品列表 */}
    </div>
  );
}

4.2、用户行为分析

function AnalyticsTracker() {
  const navType = useNavigationType();
  const location = useLocation();

  useEffect(() => {
    // 发送导航事件到分析平台
    analytics.track('navigation', {
      path: location.pathname,
      navigationType: navType,
      timestamp: Date.now()
    });
  }, [location, navType]);

  return null; // 无UI组件
}

// 在应用中使用
<Routes>
  <Route path="*" element={<AnalyticsTracker />} />
</Routes>

4.3、动态页面过渡

function AnimatedPage({ children }) {
  const navType = useNavigationType();
  const [direction, setDirection] = useState('from-right');
  
  useEffect(() => {
    setDirection(navType === 'POP' ? 'from-left' : 'from-right');
  }, [navType]);

  return (
    <motion.div
      initial={{ x: direction === 'from-right' ? 300 : -300, opacity: 0 }}
      animate={{ x: 0, opacity: 1 }}
      exit={{ x: direction === 'from-right' ? -300 : 300, opacity: 0 }}
      transition={{ duration: 0.3 }}
    >
      {children}
    </motion.div>
  );
}