React项目中如何在路由/路径变更时仅调用一次API？

方案1：在顶层组件全局监听路由变化 #

把API调用逻辑统一放在所有路由的父组件（比如App.js或通用Layout组件）里，用useLocation钩子监听路由路径变化，这样不管切换到哪个路由，只会触发一次API请求，不会出现每个路由组件都触发的问题。

示例代码：

import { useEffect } from 'react';
import { useLocation, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

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

  useEffect(() => {
    // 这里写你的API调用逻辑
    console.log('路由变更，执行API请求');
    fetch('/your-api-endpoint')
      .then(res => res.json())
      .then(data => {
        // 处理返回的数据
      })
      .catch(err => console.error('API请求失败:', err));
  }, [location.pathname]); // 仅当路径变化时触发

  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      {/* 其他路由配置 */}
    </Routes>
  );
}

export default App;

方案2：封装自定义Hook复用监听逻辑 #

如果需要在多个组件中复用路由变更触发API的逻辑，可以封装成自定义Hook，减少重复代码：

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

// 自定义Hook：监听路由变更并执行回调
function useOnRouteChange(callback) {
  const location = useLocation();

  useEffect(() => {
    callback();
  }, [location.pathname, callback]);
}

// 使用示例
function App() {
  useOnRouteChange(() => {
    // 调用API
    fetch('/your-api-endpoint');
  });

  return <Routes>{/* 路由配置 */}</Routes>;
}

方案3：带防抖的路由监听（针对快速切换场景） #

如果用户快速切换路由，担心触发多次API请求，可以加上防抖处理，避免短时间内重复调用：

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

function App() {
  const location = useLocation();
  const debounceTimer = useRef(null);

  useEffect(() => {
    // 清除上一次的定时器
    if (debounceTimer.current) clearTimeout(debounceTimer.current);

    // 300ms后执行API请求，可根据需求调整时长
    debounceTimer.current = setTimeout(() => {
      fetch('/your-api-endpoint');
    }, 300);

    // 组件卸载时清除定时器
    return () => {
      if (debounceTimer.current) clearTimeout(debounceTimer.current);
    };
  }, [location.pathname]);

  return <Routes>{/* 路由配置 */}</Routes>;
}

注意事项 #

• 如果只需要路径变更时触发，就用location.pathname作为依赖；如果连search、hash变化都要监听，直接用location作为依赖。
• 若需针对特定路径触发API，可在监听逻辑里加路径判断：

useEffect(() => {
  const targetPaths = ['/', '/dashboard', '/profile'];
  if (targetPaths.includes(location.pathname)) {
    fetch('/your-api-endpoint');
  }
}, [location.pathname]);

内容的提问来源于stack exchange，提问作者Ritik Banger