React Router v6：useNavigate结合useEffect的正确用法（解决依赖警告）

问题说明 #

你在React Router v6中使用useNavigate和useEffect实现欢迎页3秒后自动跳转，但编译器提示缺少navigate依赖项，希望useEffect仅运行一次，不想在navigate变化时重复执行。

编译器提示（翻译后） #

第9行第6列：React Hook useEffect 缺少依赖项：'navigate'。请添加它到依赖数组中，或者移除依赖数组 react-hooks/exhaustive-deps

最佳解决方案 #

方案1：将navigate加入依赖数组（推荐） #

React Router v6中，useNavigate返回的navigate函数是稳定引用，组件生命周期内不会随重渲染改变，所以加入依赖数组不会导致useEffect重复执行，同时能满足ESLint的检查要求。另外别忘了清理定时器，避免组件卸载后触发导航引发内存泄漏；如果props.nextPage可能变化，也要加入依赖以使用最新值。

import { useEffect } from "react";
import { useNavigate } from "react-router-dom";

function Greeting(props) {
  const navigate = useNavigate();
  useEffect(() => {
    const timer = setTimeout(() => navigate(props.nextPage), 3000);
    // 组件卸载时清除定时器
    return () => clearTimeout(timer);
  }, [navigate, props.nextPage]); // 加入稳定的navigate和可能变化的nextPage

  return (
    <div className="Greeting">
      <div>Hello World!</div>
    </div>
  );
}

export default Greeting;

方案2：忽略ESLint警告（不推荐） #

如果坚持不想添加依赖，可以通过注释跳过ESLint的依赖检查，但这种方式会跳过潜在的依赖问题排查，不推荐在生产代码中使用。

import { useEffect } from "react";
import { useNavigate } from "react-router-dom";

function Greeting(props) {
  const navigate = useNavigate();
  useEffect(() => {
    const timer = setTimeout(() => navigate(props.nextPage), 3000);
    return () => clearTimeout(timer);
    // 忽略依赖检查警告
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

  return (
    <div className="Greeting">
      <div>Hello World!</div>
    </div>
  );
}

export default Greeting;

关键说明 #

React Router官方明确说明useNavigate返回的导航函数是稳定的，不会在组件重渲染时改变，因此方案1既符合规范，又能保证useEffect仅执行一次，是最优选择。

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