React钩子调用无效问题求助：抽离导航公共函数报错

错误原因 #

你遇到的Invalid hook call错误，核心原因是违反了React Hook的规则：useNavigate作为React Hook，只能在函数组件的顶层作用域，或者自定义Hook的顶层作用域中调用。而你直接在普通工具函数redirectToPostID里调用它，这不符合Hook的使用规范。

解决方案 #

方案一：将navigate实例作为参数传入辅助函数 #

在组件内部先获取navigate实例，再把它作为参数传给工具函数，避免在工具函数里调用Hook。

修改后的Main.js：

import { Outlet, useNavigate } from 'react-router-dom';
import { redirectToPostID } from '../helper/helper';

function Main() {
    // 在组件顶层获取navigate实例
    const navigate = useNavigate();
    return (
        <>
            <div className="content">
                <div className="lists">
                    <div className="post" onClick={(e) => redirectToPostID(navigate, 1)}>
                        <span>Post 1</span>
                    </div>
                    <div className="post" onClick={(e) => redirectToPostID(navigate, 2)}>
                        <span>Post 2</span>
                    </div>
                </div>
            </div>
            <Outlet />
        </>
    )
}

export default Main

修改后的Helper.js：

// 不再导入useNavigate，直接接收navigate参数
export function redirectToPostID(navigate, id) {
    navigate(`post/${id}`);
}

方案二：封装为自定义Hook #

如果你的辅助函数需要依赖多个Hook，或者希望逻辑更内聚，可以把它封装成自定义Hook——自定义Hook本质就是一个以use开头的函数，内部可以合法调用其他Hook。

修改后的Helper.js：

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

// 自定义Hook必须以use开头
export function usePostRedirect() {
    const navigate = useNavigate();
    // 返回一个处理跳转的函数
    return (id) => {
        navigate(`post/${id}`);
    }
}

修改后的Main.js：

import { Outlet } from 'react-router-dom';
import { usePostRedirect } from '../helper/helper';

function Main() {
    // 在组件顶层调用自定义Hook，获取跳转函数
    const redirectToPostID = usePostRedirect();
    return (
        <>
            <div className="content">
                <div className="lists">
                    <div className="post" onClick={(e) => redirectToPostID(1)}>
                        <span>Post 1</span>
                    </div>
                    <div className="post" onClick={(e) => redirectToPostID(2)}>
                        <span>Post 2</span>
                    </div>
                </div>
            </div>
            <Outlet />
        </>
    )
}

export default Main

总结 #

• 方案一适合简单的工具函数，轻量灵活；
• 方案二更符合React的Hook设计理念，适合复杂逻辑的复用，也能避免重复传递navigate参数。

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