如何在 React 中正确地使用 useEffect 来监听路由变化并执行副作用？

如何在 React 中正确地使用 useEffect 来监听路由变化并执行副作用？

在 React 应用中（特别是使用 React Router 的场景），当需要在路由变化时执行某些副作用（如埋点、页面标题更新、数据获取等），可以通过监听 location 对象的变化来实现。

正确做法（以 React Router v6 为例）：

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

function MyApp() {
  const location = useLocation();

  useEffect(() => {
    // 路由变化时执行的副作用
    console.log('当前路径:', location.pathname);
    document.title = `页面 - ${location.pathname}`;
    // 可以在这里发送埋点、重置滚动位置等
  }, [location]); // 依赖 location 对象，确保路径或 search 参数变化时触发

  return <div>...</div>;
}

解析：

• useLocation() Hook 会返回当前的 location 对象，包含 pathname、search、hash 等信息。
• 将 location 作为 useEffect 的依赖项，可确保每次 URL 发生变化（包括 query 参数或 hash）时，副作用都会重新执行。
• 注意不要遗漏依赖项，否则可能导致闭包陷阱或副作用未及时更新。
• 如果只关心 pathname 变化，也可以写成 [location.pathname]，但通常监听整个 location 更稳妥，避免遗漏 search 或 hash 的变化。