v6路由日志记录方案

v6路由日志记录方案

柔情似水 +0/-0 0 0 正常 2025-12-24T07:01:19 React-Router

React Router v6 路由日志记录方案

从 React Router v5 升级到 v6 后，路由日志记录方案发生了显著变化。v6 版本移除了 Route 组件的 component 和 render 属性，转而使用 element 属性来渲染组件，这使得传统的路由日志记录方式不再适用。

v5 vs v6 路由结构对比

// v5
<Route path="/users" component={Users} />
<Route path="/posts" render={(props) => <Posts {...props} />} />

// v6
<Route path="/users" element={<Users />} />
<Route path="/posts" element={<Posts />} />

v6 路由日志记录实现方案

方案一：使用 useLocation Hook

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

function App() {
  const location = useLocation();
  
  useEffect(() => {
    console.log('路由变化:', location.pathname);
    // 可在此处添加自定义日志逻辑
  }, [location]);
  
  return <Routes>...</Routes>;
}

方案二：封装自定义 Hook

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function useRouteLogger() {
  const location = useLocation();
  
  useEffect(() => {
    // 记录路由变化
    const logData = {
      timestamp: new Date().toISOString(),
      path: location.pathname,
      search: location.search,
      hash: location.hash
    };
    console.log('路由日志:', JSON.stringify(logData));
  }, [location]);
}

// 在组件中使用
function MyComponent() {
  useRouteLogger();
  return <div>...</div>;
}

方案三：全局路由监听器

import { useEffect } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';

function RouteTracker() {
  const location = useLocation();
  const navigate = useNavigate();
  
  useEffect(() => {
    // 路由变化时执行日志记录
    window.gtag?.('config', 'GA_MEASUREMENT_ID', {
      page_path: location.pathname
    });
  }, [location]);
  
  return null;
}

// 在 App 组件中使用
function App() {
  return (
    <>
      <RouteTracker />
      <Routes>...</Routes>
    </>
  );
}