React App组件useEffect路由跳转后未触发，如何实现每次导航都运行？

问题根因 #

你写的无依赖数组的useEffect仅会在App组件自身发生重渲染时执行。绝大多数单页应用的路由架构中，App组件是所有路由的外层公共容器，页面导航仅会切换App内部挂载的子路由组件，App本身不会卸载/重渲染，因此这个useEffect不会重复触发。

解决方案 #

方案1：监听路由路径变化（最推荐）

将当前路由路径作为useEffect的依赖项，路径变化时自动触发回调。以React Router v6为例，实现方式如下：

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

function App() {
  const location = useLocation();
  // 依赖项传入路径，每次导航路径更新都会触发
  useEffect(() => {
    console.log("app");
  }, [location.pathname]);

  // 原有App逻辑...
  return <>{/* 你的路由出口等内容 */}</>
}

如果需要连查询参数、hash变化也触发，直接把依赖项换成[location]即可。

方案2：强制App组件随路由重新挂载（不推荐，性能损耗大）

如果确实需要每次导航都让App完整重走挂载流程，可以在App组件的渲染入口绑定与路由路径关联的key属性，每次路径变化时React会卸载旧的App实例、挂载新的实例，自然会触发所有初始化逻辑。示例配置：

// 路由配置文件中
import { useLocation } from 'react-router-dom';
function Root() {
  const location = useLocation();
  // 给App绑定路径作为key，路径变化会重置App组件
  return <App key={location.pathname} />
}

内容的提问来源于stack exchange，提问作者Daniel Firoozi