react-router-dom中useNavigate导航时旧路由组件额外渲染问题咨询

我在使用react-router-dom作为路由库时遇到了如下问题：存在Home和Login两个同级路由组件，执行导航操作时，当前组件会在卸载前额外渲染一次，具体表现如下：

• 在Home组件中调用navigate("/login")：先执行/login路由的loader函数，随后Home组件额外渲染一次，最后渲染Login组件。
• 在Login组件中调用navigate(-1)返回：Login组件会在卸载前再次渲染，随后渲染Home组件。

想咨询该行为是否为React Router的预期表现，或是潜在的框架问题。

Home组件代码 #

const Home: React.FC = () => {
    const navigate = useNavigate()
    console.log("home")
    return (
        <section className="home">
            <h1>home</h1>
            <button
                onClick={async() => {
                    navigate("/login")
                }}
            >
                to login button
            </button>
        </section>
    )
}

Login组件代码 #

const Login: React.FC = () => {
    const navigate = useNavigate()
    console.log("login")
    return (
        <section className="login">
            <h1>login</h1>
            <button
                onClick={() => {
                    navigate(-1)
                }}
            >
                to test button
            </button>
        </section>
    )
}

路由配置代码 #

const router = createBrowserRouter(
    [
        {
            path: "/home",
            loader: () => {
                console.log("home loading")
                return null
            },
            HydrateFallback: () => null,
            lazy: async() => ({ Component: (await import("@/views/home/home")).default })
        },
        {
            path: "/login",
            loader: () => {
                console.log("login loading")
                return null
            },
            HydrateFallback: () => null,
            lazy: async() => ({ Component: (await import("@/views/login/login")).default })
        },
    ],
)

系统信息 #

OS: macOS
Node.js: v22.13.1
pnpm: v9.9.0
react-router-dom: ^7.1.5

预期控制台输出 #

Home组件初始渲染 #

home loading
home

从Home导航到Login #

login loading
login

从Login返回Home #

home loading
home

实际控制台输出 #

Home组件初始渲染 #

home loading
home

从Home导航到Login #

login loading
home
login

从Login返回Home #

home loading
login
home

解答 #

这是React Router v7的预期行为，核心原因是导航流程中的状态同步机制：

1. 调用navigate后，React Router优先触发目标路由的loader函数获取数据；
2. loader执行完成后，路由内部状态更新，当前活跃组件（如Home/Login）因依赖useNavigate等路由hooks，会随状态变化触发一次重渲染；
3. 最后才会完成旧组件卸载、新组件挂载的流程。

这种额外渲染并非框架bug，若想优化可以：

• 用React.memo包裹组件，减少无意义的重渲染；
• 避免在组件顶层直接执行副作用，改用useEffect控制执行时机。

内容的提问来源于stack exchange，提问作者dyb-dev