React中useNavigate路由切换引发组件重复渲染问题求助

用React 18.2加React Router DOM 6.3开发函数组件，通过useNavigate跳转路由时，目标组件内的空依赖useEffect会触发两次，但直接在浏览器地址栏输入URL加载页面仅触发一次。生产环境中这直接导致API调用翻倍，触发了限流错误。

示例场景 #

• 根路径/对应Main组件，/start对应Start组件
• Main组件内有一个通过useNavigate跳转至/start的链接
• Start组件在空依赖的useEffect中打印"test"日志

相关代码 #

App.js #

import { lazy, Suspense } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import "./App.scss";
import LoadingSpinner from "./components/structure/LoadingSpinner.js";

const Main = lazy(() => import("./components/content/Main.js"));
const Start = lazy(() => import("./components/content/Start.js"));

export default function App() {
    return (
        <BrowserRouter>
            <Suspense fallback={<LoadingSpinner/>}>
                <Routes>
                    <Route exact path="/" element={<Main/>}/>
                    <Route exact path="/start" element={<Start/>}/>
                </Routes>
            </Suspense>
        </BrowserRouter>
    );
}

Main.js #

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

// 此处为笔误，组件名应为Main而非NotFound
export default function NotFound() {
    const navigate = useNavigate();

    function handleRouteChange(event) {
        event.preventDefault();
        // path变量未定义，存在逻辑错误
        navigate(path);
    }

    return (
        <div>
            <a href="/start" onClick={(event) => handleRouteChange(event)}>跳转到Start</a>
        </div>
    );
}

Start.js #

import { useEffect } from "react";

export default function Start() {
    useEffect(() => {
        console.log("test");
        // 实际此处为API调用逻辑
    }, []);

    return (
        <div>
            hello
        </div>
    );
}

问题原因和解决办法 #

1. React 18严格模式的开发环境特性 #

React 18的严格模式默认在开发环境会重复执行组件挂载逻辑（包括useEffect），目的是检测潜在的副作用问题。这是开发环境的正常调试行为，生产环境默认不会触发；但如果生产环境代码意外开启了严格模式，也会出现该问题。

解决：

• 开发环境：无需处理，两次日志为预期行为，可忽略；若需验证生产环境表现，可临时移除React.StrictMode的包裹。
• 生产环境：检查入口文件是否包裹了React.StrictMode，若有则移除。

2. 路由跳转逻辑错误 #

Main.js存在两处明显问题：

• 组件名写错，导出的NotFound应为Main
• navigate(path)中的path未定义，导致跳转异常，可能触发额外路由重渲染

解决：
修正Main.js代码：

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

export default function Main() {
    const navigate = useNavigate();

    function handleRouteChange(event) {
        event.preventDefault();
        navigate("/start"); // 直接指定目标路径
    }

    return (
        <div>
            <a href="/start" onClick={handleRouteChange}>跳转到Start</a>
        </div>
    );
}

3. Lazy加载导致的重复渲染 #

通过useNavigate跳转时，若懒加载组件缓存异常，可能导致组件重复加载。可尝试以下优化：

• 确认懒加载路径正确，无重复导入情况
• 给懒加载组件添加稳定的key，避免React误判为新组件：

<Route exact path="/start" element={<Start key="start"/>}/>

4. 事件绑定重复触发 #

若组件多次渲染，可能导致点击事件重复绑定。可使用useCallback包裹事件处理函数，保证引用稳定：

import { useNavigate, useCallback } from "react-router-dom";

export default function Main() {
    const navigate = useNavigate();

    const handleRouteChange = useCallback((event) => {
        event.preventDefault();
        navigate("/start");
    }, [navigate]);

    return (
        <div>
            <a href="/start" onClick={handleRouteChange}>跳转到Start</a>
        </div>
    );
}

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