别错过！React 路由监听复制即用：深入分析及性能陷阱一网打尽！

引言：你是不是也遇到了这些路由变化的困扰？

在单页应用（SPA）中，路由管理是至关重要的一部分，它不仅决定了用户如何在页面间切换，还直接影响到整个应用的性能和用户体验。无论是大型电商平台，还是小型个人博客，路由的变化几乎无处不在。但你有没有遇到过这样的情况：

• 你是否需要在路由变化时进行用户行为统计？（刚完成这个需求~）
• 或者，某些页面在路由切换时没有自动刷新导致信息错乱？
• 甚至在 UI 更新时，由于监听不到路由的变化，出现了无法响应用户操作的情况？

这些看似不起眼的问题，往往会导致功能错乱和性能下降。然而，我们在开发 React 项目中可能没有意识到如何正确监听路由变化的重要性，从而带来隐患。

本篇文章将深入探讨在 React 中如何高效监听路由变化，帮助您规避常见的坑，并显著优化用户体验。希望对你有所帮助、有所借鉴！

🎯为什么监听路由变化如此重要？

在 React 项目中，路由变化并不仅仅是页面切换，还会引发数据更新、UI 重新渲染、甚至与后台的交互，因此监听路由变化十分关键。以下是一些常见场景：

1. 用户行为监控：通过捕获用户的页面跳转路径，分析用户行为，帮助制定产品策略。（这正是我刚完成的需求）
2. 面包屑导航：可以更新面包屑导航，帮助用户理解当前的页面路径，或跳转到上级页面的快捷方式。
3. 按需加载，提升性能：复杂应用中通过监听路由变化按需加载组件或数据，可以有效减少加载时间，提升性能。
4. SEO：虽然单页应用（SPA）的 SEO 较难优化，但通过监听路由变化，可以动态更新页面的标题和描述，帮助搜索引擎更好地抓取内容。

📜React 路由变化监听的三种最佳方法

useLocation：简单高效的路由监听

React Router 提供的 useLocation Hook 是一个非常轻量、常用的监听路由变化的工具。它能够访问当前的 URL，并在 URL 变化时自动触发组件重新渲染。这使得 useLocation 非常适合轻量级场景，如页面切换时更新 UI 或触发一些简单的逻辑。

📈实际案例：实时更新页面标题

以下示例展示了如何在每次路由变化时，动态更新页面标题。

import React, { useEffect } from "react";
import { useLocation } from "react-router-dom";

const RouteChangeListener = () => {
  const location = useLocation();

  useEffect(() => {
    // 每次路由变化时执行的逻辑
    console.log("当前路径:", location.pathname);
    
    // 路由变化时更新页面标题
    document.title = `当前路径: ${location.pathname}`;
  }, [location]);

  return (
    <div>
      <h1>当前路径: {location.pathname}</h1>
    </div>
  );
};

export default RouteChangeListener;

useLocation 每次检测到路由发生变化时都会更新组件，执行对应的副作用（如：控制台日志输出或动态修改页面标题）。它非常适合那些不需要复杂逻辑处理的场景，开发者可以借助它快速实现路由监听并动态响应。

切记：确保 RouteChangeListener 组件只渲染一次。

为了避免重复渲染和性能开销，确保 RouteChangeTracker 组件在应用中只渲染一次：

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import RouteChangeListener from './RouteChangeListener'; // 你的 RouteChangeListener 组件

const App = () => (
  <Router>
    <RouteChangeListener /> {/* 确保只有一个 RouteChangeListener */}
    <Switch>
      <Route path="/dashboard" component={Dashboard} />
      <Route path="/strategy" component={Strategy} />
      {/* 省略其他路由 */}
    </Switch>
  </Router>
);

export default App;

useLocation 的优势和适用场景

• 优点：简单直接，适合路径、查询参数或哈希值变化时的场景，不需要手动刷新或额外配置。

  https://www.example.com/site-collect-rules/modify?type=http_response&nid=168&id=72
  

• 适用场景：
  • 页面 UI 动态更新：如面包屑导航或根据路由展示不同的导航菜单。
  • 页面元数据更新：例如动态修改 <title> 或其他 <meta> 信息。
  • 轻量级路由监听需求：无需复杂逻辑时，是一个高效选择。

总结：useLocation 是实现简单路由监听的首选，开发者能快速实现需求，确保应用在路由变化时能够动态响应。（全局注册一次，拦截所有的请求）

useNavigate：编程式路由跳转与监听

不同于 useLocation 的纯监听功能，useNavigate 是一个功能强大的 Hook，允许通过编程方式动态控制路由跳转。它不仅能处理用户交互后的跳转，还能够基于特定逻辑条件进行动态导航，适用于表单提交、验证后跳转等场景。

核心功能

1. 动态跳转：可以在代码中根据条件随时进行页面导航。
2. 历史记录控制：通过 replace 选项控制是否替换当前历史记录，避免增加额外的浏览历史。navigate("/success", { replace: true });
3. 前进/后退：通过 navigate(-1) 和 navigate(1)，轻松实现浏览器的前进或后退操作。

实际案例：表单提交后的路由跳转（主动跳转与监听相结合）

以下是一个用户在提交表单后，根据输入内容跳转到不同页面的示例：

import React, { useState } from "react";
import { useNavigate } from "react-router-dom";

const FormComponent = () => {
  const [inputValue, setInputValue] = useState("");
  const navigate = useNavigate();

  const handleSubmit = (e) => {
    e.preventDefault();
    if (inputValue.trim()) {
      navigate(`/details?query=${inputValue}`);
    } else {
      alert("请输入有效内容");
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="输入搜索内容"
      />
      <button type="submit">提交</button>
    </form>
  );
};

export default FormComponent;

用户输入搜索内容并提交表单后，页面将跳转到 /details 路由，同时将搜索的内容通过查询参数传递给目标页面。如果用户输入无效内容，应用可以阻止导航并提示用户进行修改。

withRouter：旧版高阶组件的经典解决方案

在 React Router v5.x 及更早版本中，withRouter 是一个高阶组件（HOC），能够将路由相关属性（如 location、history 和 match）注入到类组件中。虽然如今 Hooks API 更为流行，但对于那些使用类组件的老项目，withRouter 仍然非常实用。

通过 withRouter，你可以轻松地在类组件中实现路由监听，并在路由变化时触发特定操作，如页面重定向、动态 UI 更新等。

实际案例 1：类组件中的路由监听

import React, { Component } from "react";
import { withRouter } from "react-router-dom";

class RouteChangeListener extends Component {
  componentDidUpdate(prevProps) {
    if (this.props.location !== prevProps.location) {
      console.log("路由变化:", this.props.location.pathname);
      document.title = `当前路径: ${this.props.location.pathname}`;
    }
  }

  render() {
    return <h1>当前路径: {this.props.location.pathname}</h1>;
  }
}

export default withRouter(RouteChangeListener);

withRouter 能将路由的 location 对象传递给 RouteChangeListener 组件，使得组件能够访问当前路径信息并监听路由变化。在 componentDidUpdate 生命周期方法中，比较当前的 location 和之前的 location，当路由发生变化时触发特定逻辑，如更新页面标题或执行其他副作用。

当然，你也可以配合 Hooks 使用：

📈实际案例 2：实时更新页面标题和埋点

import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import { getRouterTitle } from "@/utils"

const RouteChangeTracker = ({ location }:any) => {
  const prevLocation = useRef(location); // 用来存储前一个路径

  useEffect(() => {
    if (prevLocation.current !== location.pathname) {
      const currRouterName = getRouterTitle(location); // 获取当前路由的title
      const prevRouterName = getRouterTitle(prevLocation.current);  // 获取上一个路由的title

      document.title = currRouterName || '监控'; // 更新title

      cloudLog({  // 埋点
        eventId: 'all-page_pv',
        pageId: currRouterName,
        prePageId: prevRouterName
      });
      prevLocation.current = location; // 更新上一个路径
    }
  }, [location.pathname]);

  return null;
};

export default withRouter(RouteChangeListener);

何时使用 withRouter？

• 类组件中的路由监听：如果项目仍在使用类组件，withRouter 是实现路由监听的首选。
• 兼容老项目：如果项目无法快速升级到 React Router v6，withRouter 是兼容性最佳的选择。。

🧩路由监听：三种方法的优缺点

在不同的项目和场景中，选择合适的路由监听方法是确保应用稳定性和性能的关键。我们将对比前面介绍的三种方法，并帮助你快速做出选择。

方法	优点	缺点	适用场景
useLocation	- 实时性高，简洁 - 简单适用 Hooks 架构	- 仅适用于 React Router v6 - 不支持类组件	轻量场景，实时监听路由变化
useNavigate	- 支持动态导航控制 - 结合用户操作进行路由跳转	- 仅适用于 React Router v6 - 实现相对复杂	需要复杂导航逻辑的场景
withRouter	- 兼容旧版 React Router - 类组件中使用方便	- 仅限于 React Router v5.x - 需要更多代码逻辑处理	老项目或类组件结构的应用

React Router v6 推出了更简洁的 Hooks API，如果你的项目已经升级到这个版本，那么 useLocation 和 useNavigate 是首选。如果你还在使用较旧的 React Router v5.x 或更早的版本（或者无法升级到v6），特别是在类组件中，withRouter 则是最佳选择，避免大规模重构。

避免常见的监听误区：性能优化与用户体验

在 React 项目中监听路由变化时，虽然有多种方法可以实现，但若使用不当，很容易陷入一些性能和用户体验的误区。以下是常见的错误以及优化建议，帮助你在项目中获得最佳性能和用户体验。这些建议同样适用于一般的性能优化。

性能陷阱一：过度渲染

监听路由变化时，开发者常常会直接在组件的 useEffect 或 componentDidUpdate 中执行大量的逻辑操作。每次路由变化时，整个组件重新渲染，可能导致页面的性能大幅下降。

问题示例：

在以下示例中，useEffect 会在每次路由变化时执行大量操作，包括数据获取和 DOM 更新，这可能导致性能问题。

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

const MyComponent = () => {
  const location = useLocation();
  const [data, setData] = useState(null);

  useEffect(() => {
    // 每次路由变化时都会执行
    console.log('Route changed:', location.pathname);

    // 模拟数据获取
    fetch(`/api/data?path=${location.pathname}`)
      .then(response => response.json())
      .then(data => setData(data));

    // 模拟其他副作用
    document.title = `Current path: ${location.pathname}`;

  }, [location]); // 依赖项为整个 location 对象

  return <div>{data ? `Data: ${data}` : 'Loading...'}</div>;
};

export default MyComponent;

优化示例：

通过条件渲染或依赖精细化监听，确保只有在确实需要时，组件才会重新渲染。例如，确保 useEffect 的依赖项数组准确无误，避免不必要的重复执行。

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

const MyComponent = () => {
  const location = useLocation();
  const [data, setData] = useState(null);

  useEffect(() => {
    // 仅在路径发生变化时更新数据
    if (location.pathname === '/specific-path') {
      fetch(`/api/data?path=${location.pathname}`)
        .then(response => response.json())
        .then(data => setData(data));
    }
  }, [location.pathname]); // 仅依赖路径变化

  useEffect(() => {
    // 仅在路径变化时更新文档标题
    document.title = `Current path: ${location.pathname}`;
  }, [location.pathname]); // 仅依赖路径变化

  return <div>{data ? `Data: ${data}` : 'Loading...'}</div>;
};

export default MyComponent;

这个过程中，我们还可以使用。使用 React.memo 来避免不必要的子组件重新渲染，或者通过 useCallback 缓存函数，确保只有在依赖项变化时才会重新执行监听逻辑。

性能陷阱二：不必要的监听

对于简单的路由变化场景，开发者可能会使用复杂的监听逻辑或频繁调用 API。这不仅浪费资源，还可能导致应用整体响应速度变慢。

问题示例：

在以下示例中，监听逻辑可能过于复杂，并在全局组件中进行，导致不必要的资源消耗。

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

const GlobalListener = () => {
  const location = useLocation();

  useEffect(() => {
    console.log('Route changed globally:', location.pathname);

    // 假设需要全局监听并执行操作
    fetch(`/api/global-data`)
      .then(response => response.json())
      .then(data => console.log(data));

  }, [location]);

  return null;
};

export default GlobalListener;

优化示例：

如果路由变化并不会影响所有组件，应该仅在需要的地方监听。将监听逻辑集中在相关组件中，避免全局性的监听。

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

const SpecificPage = () => {
  const location = useLocation();
  const [data, setData] = useState(null);

  useEffect(() => {
    if (location.pathname === '/specific-page') {
      // 仅在特定页面中执行逻辑
      fetch(`/api/specific-data`)
        .then(response => response.json())
        .then(data => setData(data));
    }
  }, [location.pathname]); // 仅在特定页面中执行

  return <div>{data ? `Data: ${data}` : 'Loading...'}</div>;
};

export default SpecificPage;

性能陷阱三：过多副作用

当监听路由变化时，开发者常常在变化发生时执行多种副作用，如页面跳转、数据加载等。这种堆叠副作用的方式可能会导致页面加载速度变慢，尤其是在路由快速切换时，用户可能会感受到明显的卡顿。

问题示例：

在以下示例中，多个副作用在路由变化时同时执行，可能导致页面卡顿。

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

const MyComponent = () => {
  const location = useLocation();
  const navigate = useNavigate();
  const [data, setData] = useState(null);

  useEffect(() => {
    // 执行多个副作用
    fetch(`/api/data?path=${location.pathname}`)
      .then(response => response.json())
      .then(data => setData(data));

    document.title = `Current path: ${location.pathname}`;
    navigate('/another-path'); // 导航到另一个路径

  }, [location]);

  return <div>{data ? `Data: ${data}` : 'Loading...'}</div>;
};

export default MyComponent;

优化示例：

将副作用拆分成小的、独立的任务，并采用惰性加载或延迟执行的方式来减少性能负担。

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

const MyComponent = () => {
  const location = useLocation();
  const navigate = useNavigate();
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      // 延迟执行数据获取
      if (location.pathname === '/specific-path') {
        const response = await fetch(`/api/data?path=${location.pathname}`);
        const result = await response.json();
        setData(result);
      }
    };

    // 执行延迟的数据获取
    fetchData();

    // 仅在路径变化时更新标题
    document.title = `Current path: ${location.pathname}`;
    
    // 延迟导航到另一个路径
    const timer = setTimeout(() => {
      navigate('/another-path');
    }, 500);

    return () => clearTimeout(timer); // 清理定时器
  }, [location]);

  return <div>{data ? `Data: ${data}` : 'Loading...'}</div>;
};

export default MyComponent;

💬结论

路由监听是 React 项目中不可忽视的关键环节。通过合理的监听方式，你可以让应用在导航、数据加载、用户交互等方面表现得更加出色。同时我们也要重视路由的变化，忽视路由变化可能会导致用户体验的下降和不必要的性能开销。

希望这篇文章对你有所帮助！你有什么关于 React 中监听路由变化的经验或问题吗？欢迎在评论区分享你的见解或提问！