React Router 集成

欢迎回到第 10 章的学习。在上一节，我们学习了用户会话追踪。现在我们要学习 React Router 集成，这是追踪单页应用路由的重要方式。

本节将学习：路由变化追踪、页面视图追踪、以及导航性能。

路由变化追踪

路由变化追踪的作用是什么？ 追踪单页应用的路由变化，了解用户导航行为，分析用户路径。

如何追踪路由变化？ 使用 React Router 的

useLocation

追踪的信息包括哪些呢？

第一个：路由路径。 新的路由路径。

第二个：路由参数。 路由参数和查询字符串。

第三个：导航时间。 路由切换的时间。

第四个：导航来源。 从哪个路由导航而来。

路由追踪代码：

文件路径：

src/components/RouteTracker.js

import { useEffect, useRef } from 'react';
import { useLocation } from 'react-router-dom';
import { trace } from '@opentelemetry/api';

const tracer = trace.getTracer('react-router');

export function RouteTracker() {
  const location = useLocation();
  const prevLocationRef = useRef();
  
  useEffect(() => {
    const navigationStart = performance.now();
    
    const span = tracer.startSpan('route.change', {
      attributes: {
        'route.path': location.pathname,
        'route.search': location.search,
        'route.hash': location.hash,
        'route.from': prevLocationRef.current?.pathname || 'initial',
        'route.timestamp': Date.now(),
      },
    });
    
    // Record navigation performance
    const handleLoad = () => {
      const navigationTime = performance.now() - navigationStart;
      span.setAttribute('route.navigation_time', navigationTime);
      span.end();
    };
    
    window.addEventListener('load', handleLoad);
    
    prevLocationRef.current = location;
    
    return () => {
      window.removeEventListener('load', handleLoad);
    };
  }, [location]);
  
  return null;
}

页面视图追踪

页面视图追踪的作用是什么？ 追踪用户访问的每个页面，记录页面访问时间，分析页面热度。

如何追踪页面视图？ 在路由变化时创建页面视图 Span，记录页面信息。

页面视图信息包括哪些呢？

第一个：页面名称。 页面的名称或标题。

第二个：页面路径。 页面的完整路径。

第三个：访问时间。 页面访问的时间戳。

第四个：停留时间。 用户在页面的停留时间。

页面视图追踪代码：

export function PageViewTracker() {
  const location = useLocation();
  const enterTimeRef = useRef(Date.now());
  
  useEffect(() => {
    enterTimeRef.current = Date.now();
    
    const span = tracer.startSpan('page.view', {
      attributes: {
        'page.name': document.title,
        'page.path': location.pathname,
        'page.timestamp': Date.now(),
      },
    });
    
    return () => {
      const stayTime = Date.now() - enterTimeRef.current;
      span.setAttribute('page.stay_time', stayTime);
      span.end();
    };
  }, [location]);
  
  return null;
}

导航性能

导航性能的作用是什么？ 追踪路由切换的性能，识别慢导航，优化导航体验。

导航性能包括哪些呢？

第一个：导航时间。 从点击链接到页面渲染完成的时间。

第二个：数据加载时间。 页面数据加载的时间。

第三个：组件渲染时间。 页面组件渲染的时间。

第四个：资源加载时间。 页面资源加载的时间。

导航性能追踪代码：

export function NavigationPerformanceTracker() {
  const location = useLocation();
  
  useEffect(() => {
    const navigationStart = performance.now();
    
    // Monitor data loading
    const dataLoadStart = performance.now();
    
    // Simulation data loading completed
    setTimeout(() => {
      const dataLoadTime = performance.now() - dataLoadStart;
      
      const span = tracer.startSpan('navigation.performance', {
        attributes: {
          'route.path': location.pathname,
          'navigation.data_load_time': dataLoadTime,
          'navigation.total_time': performance.now() - navigationStart,
        },
      });
      
      span.end();
    }, 100);
  }, [location]);
  
  return null;
}

整合到应用

如何整合到应用？ 在应用的根组件中使用路由追踪组件。

文件路径：

src/App.js

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { RouteTracker } from './components/RouteTracker';
import { PageViewTracker } from './components/PageViewTracker';

function App() {
  return (
    <BrowserRouter>
      <RouteTracker />
      <PageViewTracker />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/products" element={<Products />} />
        <Route path="/cart" element={<Cart />} />
      </Routes>
    </BrowserRouter>
  );
}

本节小结

在本节中，我们学习了 React Router 集成：

第一个是路由变化追踪。 追踪单页应用的路由变化，了解用户导航行为，分析用户路径。

第二个是页面视图追踪。 追踪用户访问的每个页面，记录页面访问时间，分析页面热度。

第三个是导航性能。 追踪路由切换的性能，识别慢导航，优化导航体验。

React Router 集成流程： 监听路由变化 → 创建追踪 Span → 记录路由信息 → 追踪导航性能 → 发送到 Collector → 在 Grafana 中可视化。

这就是 React Router 集成。通过 React Router 集成，我们可以全面了解单页应用的路由行为。

在下一节，我们将学习性能监控。学习如何监控前端应用的性能。