React应用中监听路由变化的常见方式

在 React 应用中，监听路由变化是一个常见的需求，尤其是在需要根据路由变化执行某些操作（如数据获取、页面滚动重置等）时。以下是几种常见的监听路由变化的方式：

1. 使用 react-router-dom 的 useEffect 和 useLocation

如果你使用的是 react-router-dom v5 或 v6，可以通过 useLocation 钩子来获取当前的路由信息，并在 useEffect 中监听路由的变化。

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

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

  useEffect(() => {
    console.log('Route changed:', location.pathname);
    // 在这里执行路由变化后的操作
  }, [location]);

  return (
    <div>
      {/* 组件内容 */}
    </div>
  );
}

export default MyComponent;

2. 使用 history 对象监听路由变化

在 react-router-dom v5 中，你可以直接使用 history 对象来监听路由变化。

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

function MyComponent() {
  const history = useHistory();

  useEffect(() => {
    const unlisten = history.listen((location, action) => {
      console.log('Route changed:', location.pathname);
      // 在这里执行路由变化后的操作
    });

    return () => {
      unlisten(); // 组件卸载时取消监听
    };
  }, [history]);

  return (
    <div>
      {/* 组件内容 */}
    </div>
  );
}

export default MyComponent;

3. 使用 react-router-dom v6 的 useNavigate 和 useEffect

在 react-router-dom v6 中，history 对象被 useNavigate 替代，但监听路由变化的方式与 v5 类似。

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

function MyComponent() {
  const navigate = useNavigate();
  const location = useLocation();

  useEffect(() => {
    console.log('Route changed:', location.pathname);
    // 在这里执行路由变化后的操作
  }, [location]);

  return (
    <div>
      {/* 组件内容 */}
    </div>
  );
}

export default MyComponent;

4. 使用 react-router-dom v6 的 useRoutes 和 useEffect

如果你使用的是 react-router-dom v6 的 useRoutes，你可以通过 useLocation 来监听路由变化。

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

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

  useEffect(() => {
    console.log('Route changed:', location.pathname);
    // 在这里执行路由变化后的操作
  }, [location]);

  return (
    <div>
      {/* 组件内容 */}
    </div>
  );
}

export default MyComponent;

5. 使用 react-router-dom v6 的 useRoutes 和 useEffect

如果你使用的是 react-router-dom v6 的 useRoutes，你可以通过 useLocation 来监听路由变化。

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

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

  useEffect(() => {
    console.log('Route changed:', location.pathname);
    // 在这里执行路由变化后的操作
  }, [location]);

  return (
    <div>
      {/* 组件内容 */}
    </div>
  );
}

export default MyComponent;

总结

• useLocation + useEffect：适用于 react-router-dom v5 和 v6，是最常用的方式。
• history.listen：适用于 react-router-dom v5，但在 v6 中被 useNavigate 替代。
• useNavigate + useEffect：适用于 react-router-dom v6。

根据你使用的 react-router-dom 版本选择合适的监听方式。